Gatsby Failed Build – error “window” is not available during server side rendering

by

When dealing with third-party modules that use window in Gatsby you need to add a null loader to its own webpack configuration to avoid the transpilation during the SSR (Server-Side Rendering). This is because gatsby develop occurs in the browser (where there is a window) while gatsby build occurs in the Node server where obviously there isn’t a window or other global objects (because they are not even defined yet).

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

Keep in mind that the test value is a regular expression that will match a folder under node_modules so, ensure that the /react-particle-animation/ is the right name.

Using a patch-package may work but keep in mind that you are adding an extra package, another bundled file that could potentially affect the performance of the site. The proposed snippet is a built-in solution that is fired when you build your application.

More Related Contents:

  1. How can I update NodeJS and NPM to their latest versions?
  2. NPM modules won’t install globally without sudo
  3. React-router with BrowserRouter / browserHistory doesn’t work on refresh
  4. Error message “error:0308010C:digital envelope routines::unsupported”
  5. How to include scripts located inside the node_modules folder?
  6. Why are cookies not sent to the server via getServerSideProps in Next.js?
  7. ‘npm start’ returns error: “There might be a problem with the project dependency tree”
  8. npm ERR! code UNABLE_TO_GET_ISSUER_CERT_LOCALLY
  9. How to build a production version of React without minification?
  10. How to send email from my react web application
  11. npm install doesn’t create node_modules directory
  12. npm: When to use `–force` and `–legacy-peer-deps`
  13. Module not found: Can’t resolve ‘fs’ in Next.js application
  14. Next.js: document is not defined
  15. How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?
  16. Node.js 17.0.1 Gatsby error – “digital envelope routines::unsupported … ERR_OSSL_EVP_UNSUPPORTED” [duplicate]
  17. Jest gives `Cannot find module` when importing components with absolute paths
  18. how to use async await with https post request
  19. React app error: Failed to construct ‘WebSocket’: An insecure WebSocket connection may not be initiated from a page loaded over HTTPS
  20. Get version number from package.json in React Redux (create-react-app)
  21. React + Material-UI – Warning: Prop className did not match
  22. How to fix “FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memory” error
  23. Access to XMLHttpRequest at ‘…’ from origin ‘localhost:3000’ has been blocked by CORS policy
  24. node –experimental-modules, requested module does not provide an export named
  25. React Proxy error: Could not proxy request /api/ from localhost:3000 to http://localhost:8000 (ECONNREFUSED)
  26. How to get SCSS variables into react
  27. Unable to deploy React JS application on Azure App service
  28. Invalid options object. Dev Server has been initialized using an options object that does not match the API schema
  29. How to deploy reactapp with heroku-22?
  30. Webpack how to build production code and how to use it

Leave a Comment