# Ember bootstrap toasts

**URL:** <https://discuss.emberjs.com/t/ember-bootstrap-toasts/18703>\
**Category:** Questions\
**Created:** [March 12, 2021, 5:31pm UTC](https://discuss.emberjs.com/t/ember-bootstrap-toasts/18703 "2021-03-12T17:31:05Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![geert](https://avatars.discourse-cdn.com/v4/letter/g/848f3c/32.png) [@geert](https://discuss.emberjs.com/u/geert)\
**Post date:** [March 12, 2021, 5:31pm UTC](https://discuss.emberjs.com/t/ember-bootstrap-toasts/18703/1 "2021-03-12T17:31:05Z")

</div>

I try to get the toasts working from bootstrap.

I installed ember-jquery and add this to my template:

```auto
<div class="toast">
  <div class="toast-header">
    Toast Header
  </div>
  <div class="toast-body">
    Some text inside the toast body
  </div>
</div>

```

In my controller I have the following code:

```auto
@action
  async sendAttest(subscription) {
    jQuery('.toast').toast('show');

  }

```

I get the following error:

Uncaught (in promise) TypeError: (0 , \_jquery.default)(…).toast is not a function

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [March 12, 2021, 7:56pm UTC](https://discuss.emberjs.com/t/ember-bootstrap-toasts/18703/2 "2021-03-12T19:56:29Z")

</div>

Sounds like you don’t have the bootstrap javascript or toast plugin(?) correctly initialized. How are you adding bootstrap to the app?

---

<div class="post-metadata">

**Author:** ![geert](https://avatars.discourse-cdn.com/v4/letter/g/848f3c/32.png) [@geert](https://discuss.emberjs.com/u/geert)\
**Post date:** [March 12, 2021, 8:30pm UTC](https://discuss.emberjs.com/t/ember-bootstrap-toasts/18703/3 "2021-03-12T20:30:30Z")

</div>

Bootstrap is added with its dependencies to the devDependencies section of package.json

“bootstrap”: “^4.3.1”, “popper.js”: “^1.16.1”, “jquery”: “1.9.1 - 3”

And as toast is a part of the Bootstrap library ([Toasts · Bootstrap v5.0](https://getbootstrap.com/docs/5.0/components/toasts/)) I do not know what else I could add?

Did I forget something?

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [March 12, 2021, 9:32pm UTC](https://discuss.emberjs.com/t/ember-bootstrap-toasts/18703/4 "2021-03-12T21:32:34Z")

</div>

The way Ember is currently built (there’s a big project underway called Embroider that will overhaul the build system to use webpack or rollup and improve a lot of the ergonomics around this stuff) it is only aware of ember addons and not arbitrary javascript modules. Ember auto import can help for loading “non-Ember” dependencies, or the “classic” way is to just import the files in your `ember-cli-build.js` file so they are included in the build. That would look something like:

```auto
// ember-cli-build.js
  ...
  app.import('node_modules/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js');
  app.import('node_modules/jquery-ui/ui/slider.js');
  app.import('node_modules/quill/dist/quill.min.js');
  ...

```

(that’s just an example, you’ll want to reference the exact files you’re targeting)