Import Node Modules the Ember Way

If you guys are like me, a complete noob at Ember (I’ve just picked it up and have been working on it for a month now for a new project at work), you might have ran into an issue trying to import node modules.

As JavaScript and Node.js developers, we are used to the normal way of importing node modules with using

import <moduleName>

For example, if you try to import a module like this:

import mod from 'mod'

your app won’t compile and you’ll get an error saying

Uncaught Error: Could not find module 'mod' imported from 'directory/of/your/module'

In order to to use these NPM CommonJS modules working in our Ember apps, we need to get some help compiling them using an ember addon called ember-browserify.

For us to import node modules like how we are used to, we first have to install it using your favorite package manager (mine is npm for now) like we always do, then install ember-browserify.

then, instead of importing it like this

import mod from 'mod'

we just have to change it to

import mod from 'npm:mod'

and voila! Our code will now compile and be used as expected.

I ran into this issue while trying to use the convenience methods of underscore.js and found this wonderful blog post by Jimmy Lauzau on how to use ember-browsify.

Installing ember-browserify is very easy. You just have to go on their github page and their documenation explains it all on how to setup and get it going. Now we can all use our imports like we are used to! (talking to all you beginner Ember developers out there)