# Ember-cli adding dependencies with bower

**URL:** <https://discuss.emberjs.com/t/ember-cli-adding-dependencies-with-bower/6314>\
**Category:** Ember CLI\
**Created:** [September 22, 2014, 3:17pm UTC](https://discuss.emberjs.com/t/ember-cli-adding-dependencies-with-bower/6314 "2014-09-22T15:17:29Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wayne\_Douglas](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/wayne_douglas/32/9568_2.png) [@Wayne\_Douglas](https://discuss.emberjs.com/u/Wayne_Douglas)\
**Post date:** [September 22, 2014, 3:17pm UTC](https://discuss.emberjs.com/t/ember-cli-adding-dependencies-with-bower/6314/1 "2014-09-22T15:17:29Z")

</div>

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](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…

I can’t get typeahead or bootstrap to work…

---

<div class="post-metadata">

**Author:** ![this\_ahmed](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/this_ahmed/32/9578_2.png) [@this\_ahmed](https://discuss.emberjs.com/u/this_ahmed)\
**Post date:** [September 22, 2014, 3:34pm UTC](https://discuss.emberjs.com/t/ember-cli-adding-dependencies-with-bower/6314/2 "2014-09-22T15:34:28Z")

</div>

I cloned the repo and did the following:

```
$ bower install bootstrap
$ bower install && npm install
$ ember build

```

In the `dist` folder I see bootstrap css and js in the vendor files.

Remember that changes to the Brocfile.js are not picked up until you restart the ember server.

---

<div class="post-metadata">

**Author:** ![Wayne\_Douglas](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/wayne_douglas/32/9568_2.png) [@Wayne\_Douglas](https://discuss.emberjs.com/u/Wayne_Douglas)\
**Post date:** [September 22, 2014, 3:36pm UTC](https://discuss.emberjs.com/t/ember-cli-adding-dependencies-with-bower/6314/3 "2014-09-22T15:36:44Z")

</div>

Ah!! right - I did not know this… Thanks - I will try the above out

BOOM!! that was it! so just editing a file to cause the page to refresh won’t do…

---

<div class="post-metadata">

**Author:** ![this\_ahmed](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/this_ahmed/32/9578_2.png) [@this\_ahmed](https://discuss.emberjs.com/u/this_ahmed)\
**Post date:** [September 22, 2014, 3:38pm UTC](https://discuss.emberjs.com/t/ember-cli-adding-dependencies-with-bower/6314/4 "2014-09-22T15:38:50Z")

</div>

Yeah there’s an issue open about this on Github [https://github.com/stefanpenner/ember-cli/issues/1756](https://github.com/stefanpenner/ember-cli/issues/1756)

---

<div class="post-metadata">

**Author:** ![Wayne\_Douglas](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/wayne_douglas/32/9568_2.png) [@Wayne\_Douglas](https://discuss.emberjs.com/u/Wayne_Douglas)\
**Post date:** [September 22, 2014, 3:49pm UTC](https://discuss.emberjs.com/t/ember-cli-adding-dependencies-with-bower/6314/5 "2014-09-22T15:49:49Z")

</div>

Cool, thanks. OK so bootstrap worked fine, but now I am trying to do the same with typeahead.js and I’m getting no luck again.

I have pushed my changes to the repo if you can spare a minute.

---

<div class="post-metadata">

**Author:** ![this\_ahmed](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/this_ahmed/32/9578_2.png) [@this\_ahmed](https://discuss.emberjs.com/u/this_ahmed)\
**Post date:** [September 22, 2014, 3:58pm UTC](https://discuss.emberjs.com/t/ember-cli-adding-dependencies-with-bower/6314/6 "2014-09-22T15:58:06Z")

</div>

It should be working if you test it in the browser. The errors you’re seeing are caused by JSHint which isn’t liking the fact that you’re using globals.

Just add this somewhere in your index.js view file if you want to silence the errors.

```
/* global $, Bloodhound */

```

Also when installing dependencies please save them in your bower.json file so that when someone pulls your repo down they are not missing dependencies. Use `bower install --save <name>`.

---

<div class="post-metadata">

**Author:** ![rwjblue](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rwjblue/32/9411_2.png) [@rwjblue](https://discuss.emberjs.com/u/rwjblue)\
**Post date:** [September 22, 2014, 3:58pm UTC](https://discuss.emberjs.com/t/ember-cli-adding-dependencies-with-bower/6314/7 "2014-09-22T15:58:57Z")

</div>

> [@this\_ahmed](#):
>
> Yeah there’s an issue open about this on Github [Reboot `ember server` on `Brocfile.js` change · Issue #1756 · ember-cli/ember-cli · GitHub](https://github.com/stefanpenner/ember-cli/issues/1756)

I want that issue fixed also, but it is unlikely to be fixed soonish (it is fairly complicated).

---

<div class="post-metadata">

**Author:** ![Wayne\_Douglas](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/wayne_douglas/32/9568_2.png) [@Wayne\_Douglas](https://discuss.emberjs.com/u/Wayne_Douglas)\
**Post date:** [September 22, 2014, 4:18pm UTC](https://discuss.emberjs.com/t/ember-cli-adding-dependencies-with-bower/6314/8 "2014-09-22T16:18:53Z")

</div>

OK that got me working! Cheers guys - I’m learning a lot today!