WebpackError: ReferenceError: window is not defined on Gatsby

Question

I've already made a great search on the internet and couldn't solve this problem.

I'm using Gasby to develop a static page and I'm facing this error:

WebpackError: ReferenceError: window is not defined

My clue is that, this has to do with bootsrap/Modal module i'm using. But i've cleaned all my index.js and still getting the error when i try to build it.

//index.js
import React from 'react'

const IndexPage = () => (
  <div>
  </div>
)
export default IndexPage

Does someone have an idea of how can I solve it? Thanks!

Ps: I've already tried to import the bootstrap module on componentDidMount, i've also tried to set the gatsby-node.js and I also tried to import the bootstrap module with loadable-components.

Edit1: Plugins portions from gatsby-config.js

  plugins: [
`gatsby-plugin-react-helmet`,
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/images`,
  },
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
  resolve: `gatsby-plugin-manifest`,
  options: {
    name: `ayo`,
    short_name: `ayo`,
    start_url: `/`,
    background_color: `#fff`,
    theme_color: `#20336C`,
    display: `minimal-ui`,
    icon: `src/images/icon.png`, // This path is relative to the root of the site.
  },

},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,

],

What makes you suspect the bootstrap modal if it is not even implemented in your project? Can you post the plugins portion of your gatsby.config? — apena, Aug 12 '20 at 17:17
I edited the modal.js file inside the node_modules folder with an if statement, and the project was built. But I don't think this is a solution, unless I push the node_modules to github. But it would not be a good pratice. _setResizeEvent() { if(typeof window !== 'undefined'){ if (this._isShown) { $(window).on(EVENT_RESIZE, (event) => this.handleUpdate(event)) } else { $(window).off(EVENT_RESIZE) } } } — Cefas Garcia Pereira, Aug 12 '20 at 17:31
You can import the code you want via `gatsby-browser.js`. Can you post your package JSON? — apena, Aug 12 '20 at 18:06
Bootstrap plugins depend on Jquery and possible other pieces of code outside bootstrap which would all need to be imported in gatsby-browser.js. If you just want a modal there a much easier ways to get that. — apena, Aug 12 '20 at 18:15

Ferran Buireu · Answer 1 · 2020-08-12T18:29:16.427

When using third-party dependencies (such as your Bootstrap modal) your capability to access to window object disappears. In that case, you have to add a null loader to your webpack's configuration for this module.

In your gatsby-node.js:

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

In the code above, you have to replace /bad-module/for your dependency folder in node_modules that you want to avoid to transpile. Basically, you are replacing the offending module with a dummy module during server rendering, since it's a regular expression, you have to match your module name with the folder.

You can check for further information in Gatsby's documentation about debugging HTML builds.

WebpackError: ReferenceError: window is not defined on Gatsby

1 Answers1

Linked