How can I access a bower package as an ES6 module?

Question

I'm trying to migrate an ember app to use the ember app-kit. The code requires the accounting.js library. In the pre-app-kit version the file was loaded via a script tag in index.html

<script src="http://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.3.2/accounting.min.js"></script>

and accessed in the views through the global namespace

App.MoneyField= Em.TextField.extend({
  init: function() {
    this._super();
    var value = accounting.formatMoney(this.get("money") / 100, '');
    this.set('value', value);
  };
  // other functions omitted
});

In the app-kit version, I've included accounting.js as a bower dependency. In bower.json:

{
  "name": "ember-app-kit",
  "dependencies": {
    "handlebars": "~1.1.2",
    "jquery": "~1.9.1",
    "qunit": "~1.12.0",
    "ember": "~1.4.0-beta.2",
    "ember-data": "~1.0.0-beta.6",
    "ember-resolver": "git://github.com/stefanpenner/ember-jj-abrams-resolver.git#master",
    "ic-ajax": "~0.3.0",
    "ember-testing-httpRespond": "~0.1.1",
    "accounting":"~0.3.2"
  },
  "resolutions": {
    "ember": "~1.4.0-beta.2"
  }
 }

When I try to build the app, it gives the error

W117: 'accounting' is not defined.

I understand why this is and know I need some sort of import accounting from ... statement.

How do I import a package installed via bower as an ES6 module?

Stinson

I would guess import accounting from '/vendor/accounting/accounting';. However I tried it and got the following error: Uncaught Error: Could not find module /vendor/accounting/accounting Source: 'http://localhost:8000/vendor/loader.js:21'. With requirejs I would add a shim to the config file, sadly I don't know how to do it with EAK. – Corpuz

Apparently there is something coming in the near future: emberjs.com/blog/2013/12/17/whats-coming-in-ember-in-2014.html The ember-cli is able to make a shim. – Corpuz

I created an issue for this feature: github.com/stefanpenner/ember-app-kit/issues/511 – Corpuz

Thanks @WillemdeWit. It sounds like what I was trying to do isn't possible at the moment, but hopefully will be soon. – Stinson

Answer 1

I know that this was asked a few months ago, but since then, Ember App Kit has been succeeded by ember-cli, and this provides a very straight forward means to access either bower or npm dependencies.

• Non-AMD asset
• AMD asset

With regards to being accessed as ES6 modules:

• Non-AMD assets cannot be accessed as an ES6 module, you simply access them through the global variable that they export.
  • e.g. moment
• AMD assets, on the other hand, can be accessed through the ES6 import syntax
  • e.g. import { raw as icAjaxRaw } from 'ic-ajax';

---

Worth also mentioning, that ember-cli supports an add-on system now, which can make importing these things as simple as adding them to the package.json of your project. Some of the more popular libraries already have ember-cli addons for them. This post describes how you can write your own.

Maculate

Both links do no longer exist. – Petrous