Import jquery with ember-cli

29
votes

Since ember-cli 0.0.34 jquery is removed from the .jshint file as predefined. So jquery needs to be imported, but I get the following error when doing it:

import $ from 'jquery';

The error I get is:

ENOENT, no such file or directory 'S:\...\tmp\tree_merger-tmp_dest_dir-Nb27WzDk.tmp\jquery.js'
Error: ENOENT, no such file or directory 'S:\...\tmp\tree_merger-tmp_dest_dir-Nb27WzDk.tmp\jquery.js'
    at Object.fs.statSync (fs.js:684:18)
    at addModule (S:\...\node_modules\ember-cli\node_modules\broccoli-es6-concatenator\index.js:81:46)
    .....
6
ember.jsember-cli

6 Answers

50
votes

I solved the problem by not importing jquery at all. jQuery is available via Ember.$ (link)

So I changed my code to use Ember.$(...) instead of $(...)

5
votes

I've ran into the same problem after I updated ember-cli to 0.0.34. Although I was still able to use $ (jQuery) in my code, JSHint kept throwing the error:

project/views/blah.js: line 6, col 9, '$' is not defined.

You can edit your .jshintrc and add $ back to predef.

{
  "predef": {
    // ...
    "$": true,
    // ...
  },
  // ...
}

Would definitely prefer a method using import too.

Not sure if this will be of any help, but I was able to locate the file during build by using the line below, but it caused some issues in the browser:

import $ from 'vendor/jquery/dist/jquery';

2
votes

$ becomes available after rendering / instantiation, as per usual use of jQuery.

If jQuery is desired to be used otherwise is requires the Ember prefix.

Handlebars is likewise available as Ember.Handlebars, albeit the Ember extended version.

0
votes

I solved the problem by adding this code to my JS file

import jQuery from 'ember';

0
votes

Newer versions of Ember/Ember-CLI allow for destructuring, making importing libraries much easier.

import Ember from 'ember';
const { $, get, set } = Ember;

Would bring in jquery, getters and setters.

0
votes

Make sure you've listed @ember/jquery in your dependencies within package.json of the consumed app/addon. It might look something like this:

"@ember/jquery": "^1.1.0"

Then you can continue to use jquery in the recommended way:

import $ from 'jquery';