reactjs - Gatsby build returns error on Bootstrap bundle.min.js

Question

I tried to build my Gatsby app and it returned this error:

Building static HTML failed

See our docs page for more info on this error: https://gatsby.dev/debug-html

 WebpackError: ReferenceError: Element is not defined

  - bootstrap.bundle.min.js:6 
    node_modules/bootstrap/dist/js/bootstrap.bundle.min.js:6:3033

  - bootstrap.bundle.min.js:6 
    node_modules/bootstrap/dist/js/bootstrap.bundle.min.js:6:68

  - bootstrap.bundle.min.js:6 
    node_modules/bootstrap/dist/js/bootstrap.bundle.min.js:6:162

  - Layout.js:1 
    src/components/Layout.js:1:1

  - 404.js:1 
    src/pages/404.js:1:1

I've installed bootstrap via npm and included it on my Layout component:

import React, { useEffect } from "react"
import "bootstrap/dist/js/bootstrap.bundle.min.js"
import "bootstrap/dist/css/bootstrap.min.css"
import "../assets/css/style.css"
import "../assets/css/aos.css"
import Navbar from '../components/Navbar'
import Footer from '../components/Footer'

For the record, my app works totally fine on gatbsy develop. It's also showing the following weird bootstrap code on the terminal:

I am not sure what's causing this, but I guarantee that bootstrap is working totally fine on my app.

How do I fix this thing?

UPDATE: I solve the issue WebpackError: ReferenceError: Element is not defined by adding the ff to my gatsby-browser:

import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap/dist/js/bootstrap.bundle.min.js"

But then I got a new error (complete log):

Building static HTML failed for path "/blogs/react-js-why"

See our docs page for more info on this error: https://gatsby.dev/debug-html


   6 |     }
   7 |     if (isProduction) {
>  8 |         throw new Error(prefix);
     | ^
   9 |     }
  10 |     throw new Error(prefix + ": " + (message || ''));
  11 | }


  WebpackError: Invariant failed

  - tiny-invariant.esm.js:8
    node_modules/tiny-invariant/dist/tiny-invariant.esm.js:8:1

  - history.js:250
  - history.js:250
    node_modules/history/esm/history.js:250:115

  - react-router-dom.js:29
    node_modules/react-router-dom/esm/react-router-dom.js:29:41

After making some research, the results are pointing on the use of react-router-dom in Gatsby. Not sure if its the issue but I use it on my PageLinks component:

import React from "react"
import { BrowserRouter as Router, Switch } from "react-router-dom"
import { HashLink } from 'react-router-hash-link'
import Scrollspy from 'react-scrollspy'

const data = [
  {
    id: 1,
    text: "Home",
    div: "home",
    url: "#home"
  },
  {
    id: 2,
    text: "About",
    div: "about",
    url: "#about"
  },
  {
  {
    id: 3,
    text: "Blogs",
    div: "blogs",
    url: "#blogs",
  },
  {
    id: 4,
    text: "Contact",
    div: "contact",
    url: "#contact"
  },
]

let divs = data.map(x => x.div)

export default () => {
  return (
    <Router>
      <Switch>
      <Scrollspy className="navbar-nav ml-auto" items={ divs } currentClassName="active">
            {  data.map(link => {
                return (
                        <li className="nav-item" key={link.id}>
                          <HashLink smooth to={link.url} className="nav-link text-uppercase font-weight-bold">{link.text}</HashLink>
                        </li>
                    )
              })
          }
      </Scrollspy>
      </Switch>
    </Router>
  )
}

question from:https://stackoverflow.com/questions/65949074/gatsby-build-returns-error-on-bootstrap-bundle-min-js

Answer 1

I think that your issue comes from the Scrollspy and the mix of routing you are using there. You are using the react-router-dom while Gatsby extends from @reach/router so you don't need to handle and overkill your project with Router or Switch components, Gatsby's link (<Link>) does all the job for you.

Try ignoring the transpilation of the react-scrollspy dependency in your gatsby-node.js by calling onCreateWebpackConfig API and adding a null loader.

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-scrollspy/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

Your project works under development (gatsby develop) because summarizing, it's the browser that handles the compilation of the code (where obviously there is a window and other global objects) and, naturally, react-scrollspy is using that window object to make their stuff. However, the build occurs in the server-side (Node) where there isn't a window or other global objects so the code breaks. With this customization, basically, you are avoiding the transpilation of the offending module on the server-side, avoiding the code-breaking by adding a null loader.

There are other possible reasons that may break your code is the mixing of routings.