Cannot import ES6 NPM module directly in to Ember CLI

Question

I'm trying to use d3-arrays in a project. The module itself includes both original ES6 modules and a UMD build. I would expect to be able to add this directly as a dependency to my ember-cli project and have it available, but that is not the case.

I've seen suggestions that are over a year old saying to use ember-browserify, and others suggesting making a shim, but AFAIK this would really only be ideal if it were a bower dependency, and bower seems to be on the way out.

For the sake of correctness, how can I just import this module as though it were part of my project and use it as import {mean} from 'd3-arrays without needing to convert it to another package format first?

I've tried making a shim which just exports the imported UMD code:

// index.js
var d3ArraysExports = require('d3-arrays');
d3ArraysExports.name = 'd3-arrays-shim';
module.exports = d3ArraysExports;

Ember finds this module just fine, but it never gets added to the require entries list.

If there is some design decision in Ember CLI as to why this doesn't work, please point me to it.

Does your shim enable named imports (such as import {foo} from "bar" too? Named imports is a known caveat of ember-browserify, but with that installed you can just do import d3arrays from "npm:d3arrays" and use the methods through that (d3arrays.mean([1,2])) etc. — Pete TNT
I'm having the same problem. I want to use some of the modules of d3.js like d3-arrays, d3-scale and etc. What it is the preferred solution for this. Do I need to create a shim lib for all of them? Please guide. — NkS

Ivan Ivan · Accepted Answer · 2015-10-25T17:17:27

I figured out an elegant solution to this:

I created a shim library which imports the ES6 sources from d3-arrays and makes them available to broccoli. Here's an example:

var path = require('path');

module.exports = {
  name: 'd3-arrays',

  treeForAddon: function() {
    var packagePath = path.join(this.project.addonPackages['ember-d3-arrays-shim'].path, 'node_modules', 'd3-arrays');
    var d3ArraysTree = this.treeGenerator(packagePath);
    return this._super.treeForAddon.call(this, d3ArraysTree);
  }
};

Cannot import ES6 NPM module directly in to Ember CLI

1 Answers