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

ShaunDychko commented 2 years ago

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

npm run develop
Visit http://localhost:8000
Inspect the browser console and see the error similar to Propiddid not match. Server: ":R1:" Client: ":R5:"
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 commented 2 years ago

I also have this issue with headlessui/React.useId

marvinjude commented 2 years ago

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

VagishVela commented 1 year ago

@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 commented 1 year ago

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

LekoArts commented 1 year ago

@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 commented 1 year ago

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

jeron-diovis commented 10 months ago

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 commented 7 months ago

@LekoArts did this ever get resolved? I am seeing the issue in production when using @headlessui/react@1.7.18 gatsby@5.13.3 and react@18.2.0 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 commented 7 months ago

@LekoArts did this ever get resolved? I am seeing the issue in production when using @headlessui/react@1.7.18 gatsby@5.13.3 and react@18.2.0 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.

gatsbyjs / gatsby