CODEWITHSUNDEEP
javascriptreactjswebpackgatsby
Cefas Garcia Pereira
Cefas Garcia Pereira

Reputation: 61

WebpackError: ReferenceError: window is not defined on Gatsby

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`,

],

Upvotes: 6

Views: 4886

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29320

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.

Upvotes: 8

Related Questions