Add node module to ember CLI app

Question

I would like to use this Node.js module https://www.npmjs.com/package/remarkable-regexp in my Ember-CLI application.

How do I make it available to the Ember application?

I tried it by adding this to the Brocfile.js

app.import('node_modules/remarkable-regexp/index.js');

but it fails like this:

Path or pattern "node_modules/remarkable-regexp/index.js" did not match any files

Did you install the module through ```npm install --save-dev remarkable-regexp``` ? — Adib Saad, Jan 29 '15 at 09:33

score 18 · Accepted Answer · edited Dec 20 '16 at 18:42

18

Since remarkable-regexp is a npm module, I believe the best way to integrate it with ember-cli is by using ember-browserify.

Within your ember-cli app you can install the addon by running npm install --save-dev ember-browserify

So, you can import the modules using ES6 import by prefixing it with npm:

import Remarkable from 'npm:remarkable';
import Plugin from 'npm:remarkable-regexp';

var plugin = Plugin(
  // regexp to match
  /@(\w+)/,

  // this function will be called when something matches
  function(match, utils) {
    var url = 'http://example.org/u/' + match[1]

    return '<a href="' + utils.escape(url) + '">'
      + utils.escape(match[1])
      + '</a>'
  }
)

new Remarkable()
  .use(plugin)
  .render("hello @user")

// prints out:
// <p>hello <a href="http://example.org/u/user">user</a></p>

edited Dec 20 '16 at 18:42

renno

2,659
2
27
58

answered Jan 29 '15 at 16:14

Marcio Junior

19,078
4
44
47

2

that worked quite well, thank you. I only fear the overhead in filesize and processing-time introduced by all of `browserify`s dependecies. – Hedge Jan 30 '15 at 19:51
1

@Hedge Browserify itself is a pretty large project, but with ember-browserify your build output is only four lines longer. Here's what gets added to your app: http://hastebin.com/avukejoxid.js – nucleartide Jun 20 '16 at 20:43

score 8 · Answer 2 · answered Mar 31 '16 at 20:37

ember-browserify is a great choice for use in apps, and there is work being done to try to allow Ember CLI to import NPM packages without any extra help at all.

However, if you're trying to make this work in both addons and apps you can take a slightly different approach, which is to manually modify the broccoli build chain to include your Node package.

This is a quick example of how this can be done in an addon's index.js file:

var path = require('path');
var mergeTrees = require('broccoli-merge-trees');
var Funnel = require('broccoli-funnel');

module.exports = {
  name: 'my-addon',

  treeForVendor: function(tree) {
    var packagePath = path.dirname(require.resolve('node-package'));
    var packageTree = new Funnel(this.treeGenerator(packagePath), {
      srcDir: '/',
      destDir: 'node-package'
    });
    return mergeTrees([tree, packageTree]);
  },

  included: function(app) {
    this._super.included(app);

    if (app.import) {
      this.importDependencies(app);
    }
  },

  importDependencies: function(app) {
    app.import('vendor/node-package/index.js');
  }
};

A similar technique can be used for standard apps. Again, this method will be replaced soon as the Ember CLI team adds support for Node modules, so try to use it sparingly and keep up to date with Ember CLI!

This is what worked for me because I needed to import a npm module in an addon. But started seeing this error: BroccoliMergeTrees: Expected Broccoli node, got undefined for inputNodes[0] It is because because the `tree` argument has an `undefined` value that caused an exception in `mergeTrees`. The code I changed: ` var nodes = [packageTree]; if (tree) { nodes.unshift(tree); } return mergeTrees(nodes); ` — Kashif, Jun 27 '16 at 01:02

score 7 · Answer 3 · answered Sep 01 '17 at 17:18

As of Ember-CLI 2.15.0, you can now import node modules directly. To demonstrate, ensure your app is on Ember-CLI 2.15.0, then try installing Moment.js:

yarn add moment
Add app.import('node_modules/moment/moment.js') to your ember-cli-build.js file.
You can now access moment via the window object: window.moment.
(optional) If you want to be able to import moment from 'moment', you can generate a vendor shim. See this link for details.

This won't work for node modules that don't provide a single JavaScript bundle (you will need to bundle using the methods described in other comments), but it's already a huge improvement.

score 3 · Answer 4 · answered Feb 17 '16 at 01:18

3

The browserify noise is probably the preferred method, but I hacked around it by creating a symlink in the vendor folder like so:

$ npm install --save-dev css.escape
$ cd vendor
$ ln -s ../node_modules/css.escape/css.escape.js css.escape.js

then

// ember-cli-build.js
app.import('vendor/css.escape.js');

answered Feb 17 '16 at 01:18

typeoneerror

55,990
32
132
223

Should work as long as you don't need to support filesystems lacking reliable support for symbolic links (e.g. Windows) – jacobq Jan 25 '17 at 18:35
and how do you import it in your component.js – SuperUberDuper May 05 '17 at 12:05

score 1 · Answer 5 · answered Aug 10 '17 at 13:57

1

Update you ember-cli to v2.15.0-beta.1. The new version allows you to use app.import with node_modules

For more information check https://github.com/ember-cli/ember-cli/pull/7045

answered Aug 10 '17 at 13:57

Abdullah Dahmash

525
1
6
12

Add node module to ember CLI app

5 Answers5

Linked