Bootstrap 5 Webpack plugins are not fully functional

Question

I imported the Bootstrap 5 plugin as documented using Webpack

import Offcanvas from '../node_modules/bootstrap/js/dist/offcanvas';
import Dropdown from '../node_modules/bootstrap/js/dist/dropdown';
import ScrollSpy from '../node_modules/bootstrap/js/dist/scrollspy';

The events are working fine as below:

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

But when I want to create an instance:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

I get an error:

Uncaught ReferenceError: bootstrap is not defined

I would be grateful for any help in this matter

Answer 1

Try new Offcanvas() instead of new bootstrap.Offcanvas():

var bsOffcanvas = new Offcanvas(myOffcanvas)

Yes, the Bootstrap 5 documentation states you can use bootstrap.Offcanvas, but in your case, you don't import bootstrap, you import Offcanvas directly. That's why bootstrap isn't defined.