WebpackError: ReferenceError: window is not defined

[ROODAY]

Description

When I run build I see the above error. I know the typical fix is to wrap window such that it's not called during build time, but in this case my code isn't calling window:

"window" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html

  44 |   }
  45 |
> 46 |   newObj["default"] = obj;
     | ^
  47 |
  48 |   if (cache) {
  49 |     cache.set(obj, newObj);

  WebpackError: ReferenceError: window is not defined

  - interopRequireWildcard.js:46
    node_modules/@babel/runtime/helpers/interopRequireWildcard.js:46:1

  - iterableToArray.js:1
    node_modules/@babel/runtime/helpers/iterableToArray.js:1:1

I'm not sure why I'm getting errors from @babel/runtime, and I'm not sure whether to delete it or not. Does anyone have insight on this?

The main change between when this used to work and this new error is that I abstracted some of my code into a component library that is built/packaged using the Neutrino.js framework. Could it be the webpack configuration of my component library causing issues?

Steps to reproduce

Not sure how to make a minimal reproducible case here, but can be reproduced by cloning the gatsby branch of this repo, doing yarn install and then yarn build.

Expected result

Should build fine.

Actual result

Gets the above error.

Environment

  System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 Intel(R) Core(TM) i7-4770K CPU @ 3.50GHz
  Binaries:
    Node: 12.16.1 - c:\program files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.13.4 - c:\program files\nodejs\npm.CMD
  Languages:
    Python: 2.7.17 - /c/python27/python
  Browsers:
    Edge: 44.19041.1.0
  npmPackages:
    gatsby: ^2.24.4 => 2.24.4
    gatsby-image: ^2.2.44 => 2.4.13
    gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
    gatsby-plugin-manifest: ^2.2.48 => 2.4.18
    gatsby-plugin-prefetch-google-fonts: ^1.4.3 => 1.4.3
    gatsby-plugin-react-helmet: ^3.1.24 => 3.3.10
    gatsby-plugin-sharp: ^2.4.13 => 2.6.19
    gatsby-plugin-sitemap: ^2.2.30 => 2.4.11
    gatsby-plugin-styled-components: ^3.2.1 => 3.3.10
    gatsby-source-filesystem: ^2.1.56 => 2.3.20
    gatsby-styled-components-dark-mode: ^1.1.1 => 1.2.0
    gatsby-transformer-sharp: ^2.3.19 => 2.5.11
  npmGlobalPackages:
    gatsby-cli: 2.12.21

[ROODAY]

So I'm pretty sure it's my component library that's causing this as when I stub it out like defined here the error goes away. But then I get new errors about variables not being defined, as the objects/components I import from that library don't exist now. The thing is, I don't use the window object anywhere in my components, but after they get built through Neutrino/webpack the built files have window (which I'm guessing is the issue).

How should I fix my component library so that window isn't called during the build stage of my gatsby app? Is there a neutrino.js/webpack configuration change I can make?

[wardpeet]

Hey, I haven't used Neutrino before but if it works during SSR rendering there should not be any issue. It's hard to debug such a repo without a small reproduction. The error says you're using window somewhere so make sure to wrap every window call in an if call or in a React hook so it's only called during client rendering.

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[ROODAY]

Hmm I'm not really sure how a minimal reproduction would work here, because it seems that my issue isn't necessarily with Gatsby but with how webpack is building my component library (which I then use in my Gatsby app). But I made something that might help. Here's a zip that contains a default neutrino-react-components project and a gatsby-starter-default project that imports a component from the neutrino project (the zip is large though because I included node_modules).

If you don't want the zip, here are the steps to make it yourself:

1. Run yarn create @neutrinojs/project <directory-name> to create the neutrino starter (pick components -> React components and no linter)
2. Run gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default to get the gatsby starter
3. In the neutrino starter run yarn build. Copy the contents of the build dir into a folder in the gatsby starter node_modules (e.g. test)
4. In the gatsby starter src/pages/index.js, import the neutrino starter Example component with import Example from "test/Example" and place the component somewhere
5. Run yarn develop to confirm that component works. Then run yarn build in the gatsby starter and get the issue.

I think at the end of the day this is more of a Neutrino.js/Webpack issue so I get if it's out of scope for here and you want to close this issue. But if you have any insights for how to get webpack to not use window while bundling that'd be great!

[ROODAY]

Closing this as I got a solution on stackoverflow! Tl;dr for future readers, you need to add neutrino.config.output.globalObject("this") to your .neutrinorc.js. E.g.

const reactComponents = require('@neutrinojs/react-components');

module.exports = {
  use: [
    reactComponents(),
    (neutrino) => {
      neutrino.config.output.globalObject("this");
    }
  ],
};