SSR issue with React.useId() in React 18 - mismatch between SSR and client versions.

[ShaunDychko]

Preliminary Checks

• [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• [X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

React 18's React.useId() returns a different value in the server vs. client rendered versions. This requires using React 18 and having the DEV_SSR: true flag enabled. I believe when this happens enough times it might be responsible for React also re-rendering the page.

This issue surfaced when using a HeadlessUI menu button since that menu button uses React.useId() internally. The bug report there was closed since the issue is with Gatsby.

Currently HeadlessUI is incompatible with Gatsby when React 18 is used.

Reproduction Link

https://github.com/ShaunDychko/headlessui-reproduce-menu-button-error

Steps to Reproduce

1. npm run develop
2. Visit http://localhost:8000
3. Inspect the browser console and see the error similar to Prop id did not match. Server: ":R1:" Client: ":R5:"
4. Click the page-2 link below the red box and witness a similar type of error when using a HeadlessUI menu button.

Expected Result

No error logged in the browser console about the value not matching.

Actual Result

The browser console does mention the ID mismatch.

Environment

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
    npm: 6.14.15 - ~/.nvm/versions/node/v14.17.6/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 107.0.5304.87
    Firefox: 106.0.3
    Safari: 15.6.1
  npmGlobalPackages:
    gatsby-cli: 4.24.0
    gatsby-transformer-katex: 1.2.0

Config Flags

DEV_SSR: true

[tsdexter]

I also have this issue with headlessui/React.useId

[marvinjude]

Thanks for reporting this. We would rollout a fix for this soon as we have it planned already

[VagishVela]

@marvinjude I've been hitting this issue for a while, is there a workaround for it until you release a fix?

EDIT: I'm also happy to work on a fix if you can point me in the right direction.

[javierfuentesm]

@marvinjude do you think this is causing this https://github.com/gatsbyjs/gatsby/issues/36697 ?

[LekoArts]

@VagishVela I've been hitting this issue for a while, is there a workaround for it until you release a fix? EDIT: I'm also happy to work on a fix if you can point me in the right direction.

Next fixed it with https://github.com/vercel/next.js/pull/31102.

It's a mismatch between the React tree of https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/root.js and https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/ssr-develop-static-entry.js since the algorithm explained in https://github.com/facebook/react/pull/22644 says that the tree should be the same. But we couldn't figure out the correct place to put the <Noop /> component in a timeboxed timeframe. It only happens during DEV_SSR so right now we can't further spend time on this.

[javierfuentesm]

@LekoArts so it is related to this https://github.com/gatsbyjs/gatsby/issues/36697 ??

[jeron-diovis]

It only happens during DEV_SSR so right now we can't further spend time on this.

So nobody should use DEV_SSR, or what? Debug SSR errors in production build only?

[byronlanehill]

@LekoArts did this ever get resolved? I am seeing the issue in production when using @headlessui/[email protected] [email protected] and [email protected] in production (showing as react hydration errors 418 and 423), as well as in development when DEV_SSR is true, showing as the following error:

Prop "id" did not match. Server: "headlessui-combobox-option-:Rcv9kt:" Client: "headlessui-combobox-option-:R1jt6jl:"

[maantjemol]

@LekoArts did this ever get resolved? I am seeing the issue in production when using @headlessui/[email protected] [email protected] and [email protected] in production (showing as react hydration errors 418 and 423), as well as in development when DEV_SSR is true, showing as the following error:

Prop "id" did not match. Server: "headlessui-combobox-option-:Rcv9kt:" Client: "headlessui-combobox-option-:R1jt6jl:"

I'm having the exact same issue but with headlessui-menu-button. Production and when using DEV_SSR.