javascript - WebpackError: ReferenceError: window is not defined on Gatsby - Stack Overflow

admin管理员组

文章数量:1334957

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 ponentDidMount, i've also tried to set the gatsby-node.js and I also tried to import the bootstrap module with loadable-ponents.

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: /offline
// `gatsby-plugin-offline`,

],

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 ponentDidMount, i've also tried to set the gatsby-node.js and I also tried to import the bootstrap module with loadable-ponents.

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

],

• javascript
• reactjs
• webpack
• gatsby

Share Improve this question Follow edited Aug 12, 2020 at 17:33 Cefas Garcia Pereira asked Aug 12, 2020 at 17:04 Cefas Garcia PereiraCefas Garcia Pereira 6111 silver badge44 bronze badges 4

• 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 Commented Aug 12, 2020 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 Commented Aug 12, 2020 at 17:31
• You can import the code you want via gatsby-browser.js. Can you post your package JSON? – apena Commented Aug 12, 2020 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 Commented Aug 12, 2020 at 18:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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.

本文标签： javascriptWebpackError ReferenceError window is not defined on GatsbyStack Overflow