Bootstrap 5 ReferenceError: bootstrap is not defined

Question

I'm just finish install bootstrap 5 version ^5.0.0-alpha1 and import bootstrap in app.js

import "bootstrap"

other.js

var myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.show();

when I run the code it give me error ReferenceError: bootstrap is not defined.

then I try to import bootstrap in other.js like this

import bootstrap from "bootstrap"

but when I run npm run dev error "export 'default' (imported as 'bootstrap') was not found in 'bootstrap'

If Im import modal manually like import { Modal } from "bootstrap" it give me error "TypeError: Illegal invocation"

Answer 1

If anyone trying to use with webpack, this solution worked for me.

window.bootstrap = require('bootstrap/dist/js/bootstrap.bundle.js');

Answer 2

If you use:

    import { Modal } from 'bootstrap'

then the syntax to use will be:

    let myModal = new Modal(document.getElementById('myModal'));
    myModal.show();

Working for me on a relatively simple setup with Vite and bootstrap-5.0.0-beta1.

Answer 3

Bootstrap 5.1 + webpack 5:

app.js

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

or if you only need Modal:

import * as bootstrap from 'bootstrap';
window.Modal = bootstrap.Modal;

and then you could use in other.js like:

var myModal = new Modal(document.getElementById('myModal'));
myModal.show();