Page rendering uses wrong useState default value

Description

In production, page rendering is partially wrong when using useState with a default value that depends on window.

Steps to reproduce

The following fork of a starter template demonstrates the bug. Check specifically index.js and index.css. It boils down to a useState getting initialised with this piece of code:

if ((typeof window) === 'undefined') { // required for build not to fail
    return NO_URL;
}

return window.location.href;

The conditional statement is there for gatsby to be able to build, because window is not defined during building.

Expected result

The following is obtained with yarn start / gatsby develop. All is well.

Actual result

This is obtained when building with rm -rf .cache public && ./node_modules/.bin/gatsby build --prefix-paths

The red text is because of a CSS class that would only be set if the initial value of the setState were NO_URL. But the shown url is obviously not NO_URL. So the colour and the text contradict each other.

Environment

  System:
    OS: Linux 5.3 Ubuntu 19.10 (Eoan Ermine)
    CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 12.16.1 - /tmp/yarn--1590166014711-0.6080215808640919/node
    Yarn: 1.21.1 - /tmp/yarn--1590166014711-0.6080215808640919/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Languages:
    Python: 2.7.17 - /usr/bin/python
  Browsers:
    Chrome: 81.0.4044.138
    Firefox: 76.0.1
  npmPackages:
    gatsby: ^2.21.37 => 2.21.37

[NeroVanbiervliet]

All clear, thanks a lot for your help!

[herecydev]

You’ve identified the reason correctly: that window isn’t available during gatsby build process. If you’re after information about the location there is a prop injected into each page that provides this.