Gatsby Failed Build - error "window" is not available during server side rendering

Question

I have been trying to build my gatsby (react) site recently using an external package. The link to this package is "https://github.com/transitive-bullshit/react-particle-animation".

As I only have the option to change the props from the components detail, I cannot read/write the package file where it all gets together in the end as it is not included in the public folder of 'gatsby-build'.

What I have tried:

• Editing the package file locally, which worked only on my machine but when I push it to netlify, which just receives the public folder and the corresponding package.json files and not the 'node-modules folder', I cannot make netlify read the file that I myself changed, as it requests it directly from the github page.

---

As a solution I found from a comment to this question, we can use the "Patch-Package" to save our fixes to the node module and then use it wherever we want. This actually worked for me!

To explain how I fixed it: (As most of it is already written in the "Patch Package DOCS), so mentioning the main points:

• I first made changes to my local package files that were giving the error.(For me they were in my node_modules folder)
• Then I used the Patch Package Documentation to guide my self through the rest.
• It worked after I pushed my changes to github such that now, Patch Package always gives me my edited version of the node_module.

Answer 1

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.