How to import an amd module in ember-cli? - ember-cli

Question

I am building an EmberJS application with the great help of ember-cli, which is great, but I have an error and I cannot find what I am doing wrong.
Here is what I do in my broccoli file:
app.import('vendor/underscore/underscore.js', {
exports: {
"underscore": [
"underscore"
]
}
});
and then in one of my controllers:
import _ from "underscore";
ember-cli builds my application.
But when I go to the controller using underscore, I get the error:
Error: Could not find module underscore.
What am I doing wrong?

Answer 1

Try:
app.import({
development: 'vendor/underscore/underscore.js',
production: 'vendor/underscore/underscore.min.js'
}, {
'underscore': [
'default'
]
});
This will at least give "import _ from 'underscore';" a chance to work. If you choose an AMD or ES6 version of underscore/lodash, list which modules you wish to import with 'default'.
EDIT:
Is it crucial that you use underscore? Why I ask, I'm using lodash with one Ember-cli project, and it is working fine.
Console> bower install lodash --save
then in Brocfile:
app.import({
development: 'vendor/lodash/dist/lodash.js',
production: 'vendor/lodash/dist/lodash.min.js'
}, {
'lodash': [
'default'
]
});
//or:
app.import('vendor/lodash/dist/lodash.min.js');
As for underscore - there was an issue with devDependencies not being bundled, of which underscore is one.

Answer 2

I got this from locks on #emberjs IRC.
https://github.com/ef4/ember-browserify
In your project:
npm install --save-dev ember-browserify
npm install --save-dev underscore
In your controller:
import _ from "npm:underscore";
Then you can use _. For example: _.each([1,2,3], alert);. I took everything out I had manually added to brocfile and package.json. Apparently this will do it for you. Crazy!

Answer 3

In recent versions of ember (I am using 2.11) it is possible to load AMD in UMD wrappers using
app.import('bower_components/js-md5/js/md5.js', {using: [{
transformation: 'amd', as: 'js-md5'
}]});
And in your code
import md5 from 'js-md5';
In your case of underscore it should look like:
app.import('vendor/underscore/underscore.js', {using: [{
transformation: 'amd', as: 'underscore'
}]});