How to add bootstrap js in a Gatsby Website

user_4861082 0
Viewed 23257

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!

bootstrap-4 twitter-bootstrap gatsby reactjs javascript
4 Answers

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";
user_48610820

[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";
user_69032230

To use react-bootstrap

STEP 1:

npm install react-bootstrap bootstrap

STEP 2: Load your bootstrap in gatsby-browser.js

import "bootstrap/dist/css/bootstrap.min.css";

If you don't have a gatsby-browser.js, create gatsby-browser.js in your root folder and add the above snippet

Also, I had to restart my server for it to reflect in gatsby development server

ref: https://react-bootstrap.github.io/getting-started/introduction/

user_54665340

Working in Gatsby 4.4.0 and tried doing this approach. gatsby-browser.js was requiring me to import using the node style which is require.

So I got this to work by doing it this way:

require("bootstrap/js/src/carousel")
require("bootstrap/js/src/dropdown")

As for the bootstrap scss you can import it into a .scss file manually and have it build into your stylesheet. You will need to npm install sass gatsby-plugin-sass to get sass working.

Create your file: /src/scss/bootstrap.scss

Inside the file add whatever needed:

@import "./node_modules/bootstrap/scss/functions";
@import "./node_modules/bootstrap/scss/variables";
@import "./node_modules/bootstrap/scss/mixins";
@import "./node_modules/bootstrap/scss/utilities";
@import "./node_modules/bootstrap/scss/dropdown";
@import "./node_modules/bootstrap/scss/carousel";

Then just add it into your gatsby-browser.js file as well:

require("./src/scss/bootstrap.scss")
require("bootstrap/js/src/carousel")
require("bootstrap/js/src/dropdown")

This is better so you can control which elements you need instead of just everything.

user_127348210
Related