Gatsby: Gatsby build error with navigate function

[itrevex]

Description

Describe the issue that you're seeing.

I get the error below when I try to build gatsby app.

var navigate = function navigate(to, options) {
window.___navigate(withPrefix(to), options);
};

exports.navigate = navigate;

Steps to reproduce

Create gatsby app and add a navigate function.
run "gatsby build" and error above will show

Expected result

The app should build properly

Actual result

App fails with errors

Environment

System:
OS: Windows 10
CPU: (4) x64 Intel(R) Core(TM) i7-5500U CPU @ 2.40GHz
Binaries:
Yarn: 1.12.3 - C:\Program Files (x86)\Yarnbinyarn.CMD
npm: 6.4.0 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 3.4.0 - /c/Python34/python
Browsers:
Edge: 42.17134.1.0
npmPackages:
gatsby: ^2.0.117 => 2.0.117
gatsby-image: ^2.0.29 => 2.0.29
gatsby-plugin-manifest: ^2.0.17 => 2.0.17
gatsby-plugin-offline: ^2.0.23 => 2.0.23
gatsby-plugin-react-helmet: ^3.0.6 => 3.0.6
gatsby-plugin-remove-trailing-slashes: ^2.0.7 => 2.0.7
gatsby-plugin-sharp: ^2.0.20 => 2.0.20
gatsby-source-filesystem: ^2.0.20 => 2.0.20
gatsby-transformer-sharp: ^2.1.13 => 2.1.13

[krismorf]

Hi @itrevex , is your error related to window being undefined?

During development, react components are only run in the browser where window is defined. When building, Gatsby renders these components on the server where window is not defined.

There is a section in the Docs on How to Check if window is defined.

Thanks for using Gatsby 💜

[itrevex]

Hi @krismorf yes the error is to do with window.

The challenge I am having that the function that is throwing the error is a gatsby function, to be specific the navigate function and I have no clear way of applying the type check outside the function

[itrevex]

Calling the navigate function inside the React Component class constructor was causing the problem. I resolved the issue by changing my logic and calling the navigate() function inside componentDidMount() method

[subotkevic]

@krismorf well, I'm not sure, but your "Simple auth" example (https://github.com/gatsbyjs/gatsby/tree/master/examples/simple-auth) does not work, because of that navigate() inside PrivateRoute component. Or to be correct – does not build.

[myhendry]

@itrevex @subotkevic @krismorf Hi. How did you guys implement navigate inside componentDidMount() or useEffect()? I'm using the Simple auth example and the navigate() does not build

[cedricium]

Hey @myhendry, any luck figuring it out? I'm running into the same issue 🙃

[myhendry]

Check out this reply by Jeremy in my Spectrum chat with him. He explains it very well and it solves my problem

https://spectrum.chat/gatsby-js/general/navigate-in-gatsby-simple-auth-example-leads-to-build-error~7b64a5ce-7de6-44eb-a343-de7b92203961