While setting up Bootstrap using webpack, I am individually loading JS files:
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();
});
Everything seems to be working fine except for dismissable alerts, which are not disappearing when the close 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>
I'm wondering if there might be an issue with the dependencies. According to the documentation (docs), the data API should auto-initialize. All other components like dropdowns and popovers are working correctly without any console errors.