Gatsby: 'window is not defined' error from build files

[EliranGooner]

Description

In build I constantly get the dreaded 'window is not defined' error from files I'm sure how to tackle. These are files I suspect have to do something with the page build and they consistently throw this error only in build time.
I major change I did today is re-installing the package-lock.jsonfile to solve another issue. But this came up after the initial issue was solved.
Repo: https://github.com/EliranGooner/zeitouni

Steps to reproduce

Run gatsby build

Expected result

No window related issues as I don't use it un-safely in my code, knowing it might cause problems with SSR.

Actual result

The error:

failed Building static HTML for pages - 3.497s

 ERROR #95312 

"window" is not available during server side rendering.

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





  WebpackError: ReferenceError: window is not defined

  - build-html.js:107 doBuildPages
    [zeitouni]/[gatsby]/dist/commands/build-html.js:107:24

  - build-html.js:121 async buildHTML
    [zeitouni]/[gatsby]/dist/commands/build-html.js:121:3

  - build.js:219 async build
    [zeitouni]/[gatsby]/dist/commands/build.js:219:5

Environment

System:
OS: macOS 10.15.4
CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.5 - ~/.nvm/versions/node/v12.18.1/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 83.0.4103.116
Safari: 13.1
npmPackages:
gatsby: ^2.19.7 => 2.23.11
gatsby-background-image: ^0.10.2 => 0.10.2
gatsby-cli: ^2.10.9 => 2.12.51
gatsby-image: ^2.2.39 => 2.4.9
gatsby-plugin-env-variables: ^1.0.1 => 1.0.2
gatsby-plugin-google-analytics: ^2.2.2 => 2.3.6
gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
gatsby-plugin-manifest: ^2.2.39 => 2.4.14
gatsby-plugin-offline: ^3.0.32 => 3.2.13
gatsby-plugin-prefetch-google-fonts: ^1.4.3 => 1.4.3
gatsby-plugin-react-helmet: ^3.1.21 => 3.3.6
gatsby-plugin-robots-txt: ^1.5.0 => 1.5.1
gatsby-plugin-sass: ^2.1.30 => 2.3.6
gatsby-plugin-sharp: ^2.4.3 => 2.6.14
gatsby-plugin-sitemap: ^2.3.1 => 2.4.7
gatsby-plugin-transition-link: ^1.18.0 => 1.20.2
gatsby-source-filesystem: ^2.1.46 => 2.3.14
gatsby-transformer-sharp: ^2.3.13 => 2.5.7

[connorlindsey]

In several of your components, you reference window in a useEffect hook (navbar.js). During server-side rendering, the window is undefined and is probably why you're running across this error on build.

Issue #309 references this same problem. To fix it, check if window is defined like this:

if typeof window !== 'undefined' {
  // This will only run in the browser where window is defined, so add your event listeners here
}

Hope this helps!

[pieh]

I was doing some checks here, and there are few problems here:
a) the error message doesn't have the right stack trace, which makes it impossible to get actual problematic SSR pieces - this is a Gatsby bug/regression
b) in this specific case it's the react-slideshow-image that is not "SSR ready" - you can check this issue - https://github.com/femioladeji/react-slideshow/issues/80 - commenting out usage, does fix it, but this is workaround and not fix - for workarounds we do have suggestions in https://www.gatsbyjs.org/docs/debugging-html-builds/#fixing-third-party-modules , but real fix would be to try to make react-slideshow-image SSR ready

[EliranGooner]

I was doing some checks here, and there are few problems here:
a) the error message doesn't have the right stack trace, which makes it impossible to get actual problematic SSR pieces - this is a Gatsby bug/regression
b) in this specific case it's the react-slideshow-image that is not "SSR ready" - you can check this issue - femioladeji/react-slideshow#80 - commenting out usage, does fix it, but this is workaround and not fix - for workarounds we do have suggestions in https://www.gatsbyjs.org/docs/debugging-html-builds/#fixing-third-party-modules , but real fix would be to try to make react-slideshow-image SSR ready

Tried the workaround suggested in the gatsby docs you sent. Put the snippet in gatsby-node with the slideshow component name. I think it might have something to do with something I tried which included un-minifying the build. How do I run it minified again?

error:

failed Building static HTML for pages - 4.870s

 ERROR #95313 

Building static HTML failed for path "/"

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





  WebpackError: Minified React error #130; visit https://reactjs.org/docs/error-  decoder.html?invariant=130&args[]=undefined&args[]= for the full message or us  e the non-minified dev environment for full errors and additional helpful warn  ings.

  - build-html.js:107 doBuildPages
    [zeitouni]/[gatsby]/dist/commands/build-html.js:107:24

  - build-html.js:121 async buildHTML
    [zeitouni]/[gatsby]/dist/commands/build-html.js:121:3

  - build.js:219 async build
    [zeitouni]/[gatsby]/dist/commands/build.js:219:5

[pieh]

Ah, the null-loader will mean that import will return null - meaning that You do have to make checks before using those components. The #130 error happens because without checking if components are defined it essentially executes something like this (well not even close - just to illustrate what is happening):

const Component = null
return <Component />

Now - given that the components you use here wraps other content - I would suggest something like this:

Import { Fade } from `react-slideshow-image`

function SSRFade({ children }) {
  // this is not complete - we want to replicate html markup from https://github.com/femioladeji/react-slideshow/blob/53eacdf94277eff977cbe84aea830dc0d4588708/src/lib/components/slideshow/fade.js#L188-L227 so react hydration works correctly - this is just example showing start of creating similar html markup

  return (
    <div>
      <div className="react-slideshow-container">
        {children}
      </div>
    </div>
  )
}

// this will export `Fade` if defined and fallback to SSRFade if not
export const SSRFriendlyFade = Fade || SSRFade

and then import SSRFriendlyFade from that file instead of react-slideshow-image directly.

Other options is always trying different 3rd party components - there might SSR friendly one which would let you avoid doing those workarounds.

[femioladeji]

@EliasJorgensen just as @pieh mentioned the major problem was that the react-slideshow-image package was not SSR ready. I've worked on fixing that issue and the new version 2.0.1 is good for SSR.

[EliasJorgensen]

@femioladeji Cheers for pinging me, but i think you've got the wrong guy 😄

[femioladeji]

Ooops I meant @EliranGooner 🤦‍♂️

[LekoArts]

I'll close this issue as the issue with react-slideshow-image was fixed. @pieh point a) is tracked here: https://github.com/gatsbyjs/gatsby/issues/25507