How to add bootstrap js in a Gatsby Website

Asked 7/6, 2019 at 11:30 Answered 2/3, 2022 at 23:53

Solved javascript reactjs twitter-bootstrap bootstrap-4 gatsby

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!

Peaceful answered 7/6, 2019 at 11:30 Comment(2)

Might be a silly question, but does ./node_modules/bootstrap/dist/js/bootstrap.min.js exist in your project? – Lepus 7/6, 2019 at 11:35

@Lepus obviously yes, check the package json and it's working completely fine in local environment as of now I have used bootstrapjs for dropdown in my navbar which is working fine in local so yes it does exists. – Peaceful 7/6, 2019 at 11:52

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

Peaceful answered 7/6, 2019 at 12:53 Comment(9)

alternatively you can use <Helmet> and wrap your third party lib inside it either as a link or script tag – Esmeraldaesmerelda 7/6, 2019 at 12:57

@Esmeraldaesmerelda yes I can but I don't want to actually I only want to import those components which I need in designing no unused css. – Peaceful 7/6, 2019 at 12:59

I inherited a site that used Bootstrap and needed to be brought into Gatsby without a lot of time and this is the only solution that worked. Note that I was able to at least only import the components that I needed for Bootstrap, so I did import 'bootstrap/js/dist/modal.js' Thank you! – Zsolway 28/4, 2020 at 16:42

Why can't I find popper.js on npm? – Moment 15/5, 2020 at 19:43

it can be find here npmjs.com/package/@popperjs/core popper.js has been deprecated. – Peaceful 16/5, 2020 at 5:34

i'm still getting can't resolve 'popper.js' in 'path/node_modules/bootstrap/dist/js' this is how i imported it in gatsby-browser.js import 'jquery/dist/jquery.min.js' import '@popperjs/core' import 'bootstrap/dist/js/bootstrap.min.js' Any help? – Svetlanasvoboda 21/1, 2021 at 16:56

Resolved my issue by following the updated steps from @kushal below – Svetlanasvoboda 21/1, 2021 at 17:8

How do I use the imports in the gattsby-browser.js file? – Solemnize 12/11, 2023 at 21:10

@Mr. Pyramid I followed your instructions to the 'T' but or some reason, the bootstrap js events are not firing. Any idea what the issue might be? – Solemnize 13/11, 2023 at 20:44

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

Breastfeed answered 15/1, 2020 at 6:17 Comment(1)

To highlight the difference, kushal imports the bootstrap CSS file, where as Mr. Pyramid imports a SASS file. If you don't know about SASS, its probably better to copy this import block instead. – Moment 15/5, 2020 at 19:47

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/

Kantian answered 10/1, 2021 at 3:21 Comment(5)

There is no major difference between the answer you posted and the answer which has been accepted. – Peaceful 13/1, 2021 at 4:9

there is, 1. this uses react-bootstrap 2. shows what to do when gatsby-browser.js is not present (I faced this) – Kantian 14/1, 2021 at 1:54

Yes, because it is not related to the main question if it is not there you can check in their website how to create one. – Peaceful 18/1, 2021 at 4:46

it is related. when I searched for this, I landed on this link. saving some time for people who come here like me – Kantian 19/1, 2021 at 14:57

@SahithVibudhi Thanks I am getting this issue DevTools failed to load source map: Could not parse content for localhost:8000/bootstrap.min.css.map: Unexpected token < in JSON at position 0 – Gallo 23/6, 2021 at 18:16

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.

Reprieve answered 2/3, 2022 at 23:53 Comment(1)

Popping in here in 2024... with the (relatively) new radix UI, I can also confirm that in gatsby-browser.js, require('@radix-ui/themes/styles.css'); worked while import '@radix-ui/themes/styles.css'; did NOT... very strange – Triumphant 27/1 at 11:49

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags