javascript - Using bootstrap v5 modules imported to Vanilla JS

Question

I am working on a project using npm, webpack and vanilla JS and I am trying out Bootstrap v5 alpha.

I have installed Bootstrap v5 properly through npm using: npm install bootstrap@next

I am importing the bootstrap object as such: import bootstrap from 'bootstrap';

Everything is set up according to documentation, but for example when trying to use bootstrap modules in my JS code for triggering a tooltip/popover during a EventListenner as such:

var tooltipElement = event.target.closest('.task');
var tooltip = new bootstrap.Tooltip(tooltipElement);

I get the following error:

Uncaught TypeError: bootstrap__WEBPACK_IMPORTED_MODULE_4__.default is undefined

and on the devTools the call appears like this:

var tooltip = new bootstrap__WEBPACK_IMPORTED_MODULE_4__["default"].Tooltip(tooltipElement);

I have looked at the documentation all over again and I can't figure out what I am doing wrong, bootstrap appears to be properly installed and imported but it will always throw that error when using its JS calls

Answer 1

So I have found the solution to my problem in case anyone faces the same issue:

Apparently because bootstrap doesn't have a export default or it's not correctly configured you need to import like this import * as bootstrap from 'bootstrap'; for it to work. And to be able to use the bootstrap object

I don't know why the official documentation says you should do import bootstrap from 'bootstrap'; but there you go