Using StealJS to load Bower components lacking a bower.json file

Question

I am using the StealJS + Bower integration in my application, but a couple of my Bower components (including es6-collections) do not contain a bower.json file. Because es6-collections is one of the dependencies in my project's bower.json file, StealJS tries to load the es6-collections component's bower.json file, cannot find it because it does not exist, and complains: Unable to load the bower.json for es6-collections. I tried using System.config({ path: { 'es6-collections': '...' } }) to notify StealJS of the path to the script to use when loading es6-collections, but that does not help. What can I do to get StealJS to load this component?

Answer 1

Assumptions

So I am going to make a few assumptions:

• you are using steal from bower
• you are "bower install"'ing es6-collections from github directly
• you are implicitly using the system-bower plugin by using the HTML <script src="bower_components/steal/steal.js" main="main"></script> to load your "main" file

If these things seem mostly true-ish then you may just have to add some configuration in your bower.json file to silence the error/warning and have everything work as expected.

Explanation:

So because the system-bower plugin (which you are using implicitly because steal detects it is being loaded from a bower_components directory) uses the components bower.json files to determine entry points, so in this case the error/warning comes from not being able to find es6-collections bower.json file.

Solution:

So we just need to tell System (used by steal) where to find that module and that it can stop looking for it's bower.json file.

We can do that by adding a "system" property to the bower.json and adding some configuration data like this...

"system": {
  "paths": {
    "es6-collections": "bower_components/es6-collections/index.js"
  },
  "bowerIgnore": ["es6-collections"],
  "meta": {
    "es6-collections": {
      "format": "global"
    }
  }
}

• The paths configuration there, tells System where to find the module
• The bowerIgnore array tells system-bower to not look for the bower.json for that module
• and the meta config is there to tell System to treat this module like it's a script that is going to add to the global object (window in the browser), which you should probably do for this particular module because of the way es6-collections was written: it exports an empty object if it has nothing to pollyfill so you can't use the exported object, best to just use it as if it was a global module.

For more information on all these things...

http://stealjs.com/docs/bower.html

https://github.com/systemjs/systemjs/wiki/Meta-Configuration

http://stealjs.com/docs/steal.html

Just to have a working example here https://gist.github.com/BigAB/c108bb0860c9cfee3d6a are three files you can copy-paste/clone and then do a bower install and see it working.