Warning: Prop `id` did not match. Server: "headlessui-listbox-button-:R9ilp:" Client: "headlessui-listbox-button-:R16an5:"

[craigbloodworth]

While this issue was previously solved by fixing something in next.js:
Originally posted by @RobinMalfait in #2606 (comment)

It seems the problem still exists in Gatsby. I'm current getting:
Warning: Prop id did not match. Server: "headlessui-listbox-button-:R9ilp:" Client: "headlessui-listbox-button-:R16an5:"

It's current getting the way of SSR and causing rendering to fall back to the client.

"@headlessui/react": "^1.7.17",
"@headlessui/tailwindcss": "^0.2.0",
"gatsby": "^5.12.4",
....
"react": "^18.2.0",
"react-dom": "^18.2.0",

[thecrypticace]

@craigbloodworth can you provide a reproduction?

[RobinMalfait]

Hey!

Looking at the generated IDs, it's clear to me that they are using the native useId hook provided by React. You can identify these IDs because of the : then a random sequence of letters/numbers and another :.

Unfortunately this is not a Headless UI bug, but a Gatsby bug. Similar how this was a Next.js bug because they had multiple versions of React in development mode causing this mismatch.

In case of Gatsby, I wanted to open an issue about this but there is already an existing one about this: gatsbyjs/gatsby#36956 (which was also a bug report on Headless UI but a very simple reproduction without Headless UI also had this issue)

I also noticed that this was also a bug in React itself (facebook/react#25713) when using StrictMode. But this should have been fixed and it looks like you are on the latest version already according to the package.json snippet you provided.

If you provide a reproduction repo then we can maybe find a workaround but I'm afraid since this is not a Headless UI bug that this is not going to be easy unfortunately.

Going to close this in the meantime, but feel free to provide a reproduction repo and we can take another look.

Hope this makes sense, and sorry about the inconvenience!