UMD With Ember-CLI in Bower component

Ember CLI
1

I asked this question here: javascript - UMD With Ember-CLI - Stack Overflow

I am trying to load the gridstack in my Ember application via ember-cli. I installed the application via bower and imported in my ember-cli-build.js file. It includes _ as a library via:

if (typeof define === 'function' && define.amd) {
    define(['jquery', 'lodash'], factory);
}

define.amd evaulates to false

I looked into why this is the case , and found that ember-cli’s loader doesn’t support UMD. On an open cli issue, Stefan Penner, one of the main cli developers, suggested:

This is by design. As this library requires a pre build step to de-anonymize the modules. That step can do the appropriate munging to work correctly

I have no clue what that means. I got around the issue by manually importing the dependencies of this library in my own ember-cli-build before this library but that’s defeating the purpose of dependency management. How can I make this library resolve its own modules?

2

Gridstack is a standalone AMD module. Try adding it this way in your ember-cli-build.js file

  app.import('bower_components/lodash/lodash.js', {
    type: 'vendor',
    prepend: true
  });
  app.import('bower_components/gridstack/src/gridstack.js', {
    type: 'vendor',
    prepend: false
  });
  app.import('bower_components/gridstack/src/gridstack.css', {
    type: 'vendor',
    prepend: false
  });
  app.import('bower_components/gridstack/src/gridstack-extra.css', {
    type: 'vendor',
    prepend: false
  });
3

I don’t think that works.

From the looks of it, gridstack is bundled as an anonymous AMD module. Anonymous AMD module is not supported by ember-cli. They’re working on it, but it’s been delayed and the effort was never pushed to completion. You can find the project here: GitHub - stefanpenner/petal

If you want to use it, you’ll have to manually edit the library file and make it a named AMD module.