ember-cli adding dependencies with bower

Question

So - I want to have a play with typeahead in an ember app.

I get a cli app up and running then I run

bower install typeahead.js

I can see that the code has been put into bower_components.

I then add the following to the brocfile:

/* global require, module */

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp();

// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.

app.import('bower_components/typeahead.js/dist/typeahead.bundle.min.js');

module.exports = app.toTree();

However it doesn't work - I get

Uncaught ReferenceError: Bloodhound is not defined 

From reading the docs - installing with bower and adding the lines in the brocfile should be enough to satisfy it? Am I reading it wrong or is this a bug?

I have created a public GIT repo which shows this issue:

https://github.com/wayne-o/ember-cli-bootstrap

All I have done is:

ember new bootstrap-test
bower install bootstrap

And then added:

app.import('bower_components/bootstrap/dist/css/bootstrap.css');
app.import('bower_components/bootstrap/dist/js/bootstrap.js');

to the brockfile...

It hasn't worked...

Answer 1

You didn't share your Brocfile.js, but I've had similar issues when I've added dependencies after the module.exports = app.toTree(); line at the end of that file. The documentation is not terribly clear about this, but module.exports = app.toTree(); should always come last in Brocfile.js. Try moving your app.import() statement above this line and things should work correctly.

Update

Pulling down your repo I noticed a few issues. First is that you need to pass --save-dev to your bower installs for bootstrap and typeahead.js in order for those to be installed when others pull down your repo. That will add a section like this to your bower.json:

"devDependencies": {
   "bootstrap": "~3.2.0",
   "typeahead.js": "~0.10.5"
 }

I also added "Bloodhound": true to the prefdef section of .jshintrc to avoid jshint errors on build:

 "predef": {
    "document": true,
    "window": true,
    "-Promise": true,
    "Bloodhound": true
  },

You can also replace your $ references in index.js with Ember.$ to avoid another jshint error.

Once I did this I was able to run ember serve and have the app load without any Bloodhound issues.