How to add bootstrap js in a Gatsby Website

Question

I have been tweaking in Gatsby and by far it provides seamless functionality for static websites. I have stack where I need to design layouts using bootstrap as far as layouts are concerned bootstrap works well but for additional support like dropdowns carousel or modal I have to use bootstrap.js and it's dependencies though in local environment everything works fine but when I am deploying my website our netlify I am facing this issue

4:25:02 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
4:25:01 PM:   7 | //# sourceMappingURL=bootstrap.min.js.map
4:25:01 PM: 
4:25:01 PM:   WebpackError: TypeError: Cannot set property 'emulateTransitionEnd' of undefin  ed
4:25:01 PM:   
4:25:01 PM:   - bootstrap.min.js:6 
4:25:01 PM:     [lib]/[bootstrap]/dist/js/bootstrap.min.js:6:2564
4:25:01 PM:   
4:25:01 PM:   - bootstrap.min.js:6 ./node_modules/bootstrap/dist/js/bootstrap.min.js
4:25:02 PM: Shutting down logging, 58 messages pending 

After further digging over this issue in official repo and over google most people are recommending react-bootstrap or reactstrap but I am very much bound to bootstrapjs and unable to find out the proper fix for the above error is there anyway or best way to include bootstrap js? Here is my package.json file.

"dependencies": {
    "bootstrap": "^4.3.1",
    "gatsby": "^2.8.2",
    "gatsby-image": "^2.1.2",
    "gatsby-plugin-manifest": "^2.1.1",
    "gatsby-plugin-offline": "^2.1.1",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-plugin-react-svg": "^2.1.1",
    "gatsby-plugin-sass": "^2.0.11",
    "gatsby-plugin-sharp": "^2.1.3",
    "gatsby-source-filesystem": "^2.0.38",
    "gatsby-transformer-sharp": "^2.1.21",
    "jquery": "^3.4.1",
    "node-sass": "^4.12.0",
    "popper.js": "^1.15.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.1"
  },
  "devDependencies": {
    "prettier": "^1.17.1"
  },

Thank you in advance!

Answer 1

Fixed this by adding my bootstrap dependencies in gatsby-browser.js (if it is not present in your project add it in your root directory by creating a fresh file with the same name gatsby-browser.js).

First, I installed the dependencies using npm:

npm install bootstrap jquery @popperjs/core

And, here is how I have added in gatsby-browser.js:

import './src/sass/app.scss'
import 'jquery/dist/jquery.min.js'
import 'popper.js/dist/popper.min'
import 'bootstrap/dist/js/bootstrap.min.js'

app.scss is the file where I have imported my bootstrap components along with my custom styles.

Alternatively, you can use react-bootstrap which removes the unnecessary jQuery dependency for bootstrap but uses bootstrap styling to style its own component.

UPDATE

The popper.js has been deprecated and now it can be found here

Thanks, Ben for pointing it out,

UPDATE [May 2021]:

Bootstrap released v5 on 5th May 2020, so those who are working with Bootstrap v5 should follow these instructions.

In Bootstrap v5. Bootstrap is migrating from 1.x.x to 2.xx popper.js and therefore :

Step 1: First change the Bootstrap version: npm i bootstrap@next

Step 2: Update Popper.js to v2 npm i @popperjs/core

Step 3: In gatsby-browser.js add the following imports

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
import "@popperjs/core/dist/umd/popper.min.js";

Answer 2

[Almost similar as the accepted answer.]

Another way to add Bootstrap and related dependency with gatsby is adding them in gatsby-browser.js like following:

Step 1: Run npm i bootstrap jquery popper.js

Step 2: In gatsby-browser.js add following imports

import "bootstrap/dist/css/bootstrap.min.css";
import "jquery/dist/jquery.min.js";
import "popper.js/dist/popper.min";
import "bootstrap/dist/js/bootstrap.min.js";

Note: if gatsby-browser.js is already present and contains ES5 code, then that needs to converted to ES6 first

UPDATE [Jan 2021]:

After the Bootstrap v5.0.0; these steps have changed because Bootstrap's migration from 1.x.x to 2.xx Popper.js and complete removal of JQuery:

Now the steps are: Step 1: First change the Bootstarp version t0 5: npm i bootstrap@^5.0.0

Step 2: Update Popper.js to v2 npm i @popperjs/core@^2.5.4

Step 3: In gatsby-browser.js add the following imports

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
import "@popperjs/core/dist/umd/popper.min.js";