How to initialise bootstrap dismissable alert with webpack

Question

I am installing Bootstrap via webpack, and loading JS files individually:

import '../../../scss/app/app.scss';

import 'popper.js';
import 'bootstrap/js/dist/tooltip';
import 'bootstrap/js/dist/popover';
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/tab';
import 'bootstrap/js/dist/collapse';

$(() => {
  $('[data-toggle="tooltip"]').tooltip();
  $('[data-toggle="popover"]').popover();
});

All elements work as expected except for dismissable alerts, which do not disappear when the button is clicked:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  // Message here
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

Have I got the dependencies wrong? My understanding is the data api should auto-initialise ( docs ). All dropdowns, popovers, etc appear to work fine and I have no console errors.

Answer 1

My dumb ass:

import 'bootstrap/js/dist/alert';

In fairness, this is missing from the bootstrap docs .