Ember bootstrap toasts

I try to get the toasts working from bootstrap.

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

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

In my controller I have the following code:

  async sendAttest(subscription) {


I get the following error:

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

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

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) I do not know what else I could add?

Did I forget something?

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:

// ember-cli-build.js

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