Gatsby V3 react components not working as expected in build version

[saihaj]

Description

When in development mode react components work as expected but after building it isn't working how they should. I have created this repo to show the issue https://github.com/saihaj/gatsbyv3-react-build-issue

Steps to reproduce

See: https://github.com/saihaj/gatsbyv3-react-build-issue

Expected result

In dev mode one of the pages is like this

Actual result

But in built version it is like this

Environment

  System:
    OS: macOS 11.2.3
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.15.0 - /var/folders/cd/q8bp7mkx43l4yg9b5h37yxh00000gn/T/yarn--1616
439245877-0.3932471228672285/node
    Yarn: 1.22.10 - /var/folders/cd/q8bp7mkx43l4yg9b5h37yxh00000gn/T/yarn--1616
439245877-0.3932471228672285/yarn
    npm: 7.6.3 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 89.0.4389.90
    Safari: 14.0.3

[saihaj]

I tried downgrading to v2 and everything works as I would expect it to be.
Edit: You can checkout this branch.

[LekoArts]

You are most likely seeing React Hydration issues that are caused by lines like these:

https://github.com/saihaj/gatsbyv3-react-build-issue/blob/4ff6e75a86badc5205949f1ec99212d9f5873860/packages/www/src/components/SectionNav.tsx#L27-L32

During SSR (gatsby build) the width will be 0 so your toggleNav() won't be called and subsequently on the client. I'm not sure what you are trying to do there but if you want to show/hide the mobile nav on smaller viewports I'd suggest using CSS media queries for that.

[LekoArts]

Then your installation / installed dependencies might be messed up and you have multiple versions of the same package (e.g. React) installed. If you use a monorepo you'll need to check for that e.g. with yarn why [package-name].

[saihaj]

If you try to run that repo locally I think there should be a react package and probably a Gatsby version

[saihaj]

@LekoArts I tried removing where I was using width to change so now in that component I am not using something that uses window and onClick handler should update toggle state for the menu button but it is not. Even gatsby-backgrund-image should work but it is not working. As I mentioned above when I move this out of monorepo as is everything works as I would expect it to be in built version.

[saihaj]

Checkout this branch this is without Lerna and yarn workspaces and no code changes what so ever and it is working. I understand the react hydration part but even when I remove that as I mentioned above it still isn't working in a monorepo structure.

[saihaj]

Similar issue is reported here #30255

Edit: updated to v3.1 on this branch and it works

[saihaj]

As suggested in #30255 updating to gatsby v3.1 and regenerating the lock file fixes this.