What is the best way to load Bootstrap with an ES6 import?

Question

I recently switched from using Require.js to using WebPack with Babel. In the past I would use the CommonJS standard in my JS modules, like this

var $ = require('jquery');
require('bootstrap');

Since Bootstrap is a jQuery plugin, jQuery would load first and bootstrap would load second.

Babel allows me to use ES6 import statements. But when I write

import $ from 'jquery';
import Bootstrap from 'bootstrap';

I get the error that $ is undefined. Bootstrap assumes that window.$ is present, but import does not pollute the window object, which is a good thing, but leaves my code like this:

// legacy loading for bootstrap
var $ = require('jquery');
window.$ = $;
require('bootstrap');
// the rest of the imports
import _ from 'underscore';

There must be a better solution. Any help appreciated.

Answer 1

If you have Webpack in your build...

...you'll need to work with Webpack's provide plugin. Since the error is that jQuery is not defined we will define/provide it with the plugin :

In the webpack configuration :

// webpack.config.js
...
plugins: [
  new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery'
  })
]
...

Now, in our ES6/2015 module :

// main.js
...
// jquery is required for bootstrap
import $ from 'jquery'

// bootstrap
import 'bootstrap'

// bootstrap css 
import 'bootstrap/dist/css/bootstrap.css'
...

Reference : https://2017-sparkler.rhcloud.com/2017/02/01/bootstrap-in-webpack-es6-2015-project/

Good Luck.

Answer 2

Bootstrap 4 Solution

Bootstrap 4 has two dependencies: jQuery and Popper.js.

1. Install necessary packages:

   npm install jquery popper.js bootstrap --save
   

2. In your app, import like so:

   import 'bootstrap';
   import 'bootstrap/dist/css/bootstrap.css';
   

3. If you want to use $ globally for jQuery, add this to your webpack config (this is webpack.base.conf.js for me):

   plugins: [
     new webpack.ProvidePlugin({
       $: 'jquery'
     })
   ]
   

Answer 3

Some of the answers here say to use the Webpack's ProvidePlugin.

As of 2020 and bootstrap v4.4.1, you do not need to use that plugin.

Bootstrap defines both jquery and popper.js as peer dependencies, so you just install them together with bootstrap:

npm i -S bootstrap jquery popper.js

And use them in your code, e.g.:

import "bootstrap";
import $ from "jquery";

$(() => {
    $(".element-with-tooltip").tooltip();
});

Answer 4

If you're using Bootstrap 4 alpha, you will need tether as well as jQuery. Imports are discussed here: How to fix the error; 'Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)'

Answer 5

import './wrappers/jquery';
import 'bootstrap';

and in wrappers/jquery.js:

import jquery from 'jquery;
window.jQuery = window.$ = jquery;

Answer 6

All of these are old answers and in 2023 import 'bootstrap'; didn't work for me. Instead I had to do:

In package.json

"dependencies": {
  "jquery": "^3.6.3",
  "bootstrap4": "npm:bootstrap@^4.6.2"
}

In your JS

import $ from 'jquery';
import 'bootstrap4/dist/js/bootstrap.bundle';