Search code examples
jqueryember.jsimportember-cli

How to import jQuery from @ember/jquery

I am trying to import @ember/jquery in my component.

I have installed @ember/jquery and @ember/optional-features and imported as below

import $ from '@ember/jquery'

but I am getting the following error in my component:

error missing module @ember/jquery

Is this the right way to import it?

https://github.com/emberjs/ember-jquery

Solution

  • The module exporting jQuery is named jquery, not @ember/jquery. @ember/jquery is the name of the npm package

    The correct way to import jquery is

    import jQuery from 'jquery';

    Since we are importing the default export from the jquery module, we can name it the way we want:

    import $ from 'jquery'; // this will also work and we will use `$` to reference jquery

    For this to work, you should also enable the jquery-integration optional feature for your ember.js app. Check your config/optional-features.json file and make sure it contains the following line

    {
  "jquery-integration": true
}

    If config/optional-features.json does not exist or does not contain the jquery-integration: true line, you can create/edit the file manually or generate it with the cli command:

    ember feature:enable jquery-integration