Using libraries from NPM with Ember

UPDATE: All those manual steps can be replaced with ember-auto-import.

Using NPM packages with ember without ember-cli wrappers is actually possible but it requires 2 broccoli plugins:

  • broccoli-funnel for moving arbitrary files and directories
  • broccoli-merge-trees - for merging trees

Here is quick cheatsheet how to make it work:

  1. Install dependencies:

     npm install -D broccoli-funnel broccoli-merge-trees
  2. Generate vendor shim which will be responsible by exporting the library as ES6 module:

      ember generate vendor-shim library-name
  3. It should generate shim code similar to the one below:

      // vendor/shims/library-name.js
      (function() {
        function vendorModule() {
          'use strict';
          return {
            'default': self['library-name'],
            __esModule: true,
        define('library-name', [], vendorModule);
  4. Generate in-repo addon where you will include your shims in the import paths:

     ember generate in-repo-addon libary-name
  5. Include library and vendor shims in the import paths:

     // lib/library-name/index.js
     var path = require('path');
     var Funnel = require('broccoli-funnel');
     var MergeTrees = require('broccoli-merge-trees');
     module.exports = {
       name: 'library-name',
       included() {
         this._super.included.apply(this, arguments);
       treeForVendor(vendorTree) {
         var libraryPath = path.join(this.project.root, 'node_modules', 'library');
         var libraryTree = new Funnel(libraryPath, {
           files: ['library.js'],
         return new MergeTrees([vendorTree, libraryTree]);