[Bug]: Tab Component, Hydration error on React 18

[mirshko]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.60

What browser are you using?

Safari

Reproduction URL

https://codesandbox.io/s/cool-yonath-qeouqc?file=/pages/index.js

Describe your issue

Error: Hydration failed because the initial UI does not match what was rendered on the server. error message when using the headlessui Tab component.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

I don't know if there is much we can do here. We are using React 18's useId hook, and the produced IDs are different on the server compared to the client. In the console you also have this warning:

Warning: ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

Fixing that might probably solve the issue.

Here is an example of our playground where we don't have hydration issues and this behaviour works as expected: https://headlessui-react-fglvz9cc1-tailwindlabs.vercel.app/tabs/tabs-with-pure-tailwind

[MTaghinia]

Hey! Thank you for your bug report! Much appreciated! 🙏

I don't know if there is much we can do here. We are using React 18's useId hook, and the produced IDs are different on the server compared to the client. In the console you also have this warning:

Warning: ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

Fixing that might probably solve the issue.

Here is an example of our playground where we don't have hydration issues and this behaviour works as expected: https://headlessui-react-fglvz9cc1-tailwindlabs.vercel.app/tabs/tabs-with-pure-tailwind

The provided example also has this problem and it shows the hydration error in the console.
There is a problem with id created with useId hook which cause hydration error with nextjs and react 18.

[lgraubner]

This also happens with react@17.0.2, getting the following warning in the browser console:

Expected server HTML to contain a matching <button> in <div>.

[mirshko]

@RobinMalfait I dont think this issue is closed then, or am I missing something?

[RobinMalfait]

This should be fixed by #1393, and is available in the latest release (1.6.1).
If you have other issues, please open a new issue with a reproduction repo / CodeSandbox attached 👍

[lgraubner]

The latest release does fix it, indeed. Thanks!

[ludusrusso]

Hi! I have a similar issue with Popover componente. React 18.1.0 with Next 12.1.6 and @headlessui/react 1.6.2

[justinwaite]

I also continue to see this issue with React 18.2.0, Remix 1.6.0, and @headlessui/react 1.6.5

[Tosinkoa]

I am getting rehydration error, pls help

[RobinMalfait]

If anyone still experiences an issue with this, please open a new issue with a minimal reproduction repo attached. Sadly, it's impossible to help without info!