Open ShaunDychko opened 1 year ago
I also have this issue with headlessui/React.useId
Thanks for reporting this. We would rollout a fix for this soon as we have it planned already
@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.
@marvinjude do you think this is causing this https://github.com/gatsbyjs/gatsby/issues/36697 ?
@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.
@LekoArts so it is related to this https://github.com/gatsbyjs/gatsby/issues/36697 ??
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?
@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:"
@LekoArts did this ever get resolved? I am seeing the issue in production when using
@headlessui/react@1.7.18
gatsby@5.13.3
andreact@18.2.0
in production (showing as react hydration errors 418 and 423), as well as in development whenDEV_SSR
istrue
, 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.
Preliminary Checks
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
http://localhost:8000
Prop
iddid not match. Server: ":R1:" Client: ":R5:"
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
Config Flags
DEV_SSR: true