Bootstrap 5 ReferenceError: bootstrap is not defined

user_13274255 0
Viewed 32962

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"

twitter-bootstrap
8 Answers

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

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

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.

user_1233780

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();
user_112111000

For me working

in app/javascript/packs/application.js

window.bootstrap = require('bootstrap');
user_114028040

For TypeError: Illegal Invocation meaning:

var modal = new Modal(document.getElementById('modal'))

// no tag div with id modal
// will produce error **Illegal Invocation**

This work for me. bootstrap@5.0.0-beta1

<script>    
import { Modal } from 'bootstrap'

export default {
   data: () => ({
      modal: ''
   }),

   mounted() {
      this.modal = new Modal(document.getElementById('exampleModal'))
   },

   methods: {
      openModal() {
         this.modal.show()
      },

      closeModal() {
         this.modal.hide()
      }
   }
}
</script>

<template>
   <div id="exampleModal">...</div>
</template>
user_80121100

If you do not import Bootstrap via a <script> tag or via CDN in your HTML, the bootstrap namespace is not on your window object, so it will not be defined. If you are using a bundler such as Webpack, you have to load it giving it the full name.

import { Modal } from 'bootstrap/dist/js/bootstrap.bundle.js';

should work perfectly. This way, you will also have popper.js dependencies which are used by Bootstrap's JavaScript.

Make sure you actually are using something supporting ESnext.

user_20367660

In Laravel with Webpack this worked for me:

import {Collapse} from "bootstrap"

Note: the parentheses

let boostrapCollapse = new Collapse(searchPanel, {
    toggle: false
});
user_11706770

I tried the proposed solutions here and none of them worked for me. This is how I got it working using react 18.2 and bootstrap 5.2.

  1. install bootstrap using npm:
    npm install bootstrap
  2. put this in your App.js to import the bootstrap CSS:
    import 'bootstrap/dist/css/bootstrap.css'
  3. include bootstrap JS like this:
    import * as bootstrap from 'bootstrap/dist/js/bootstrap'
user_16465940
Related