<Transition /> overwrites the className of the child component in SSR

[zero734kr]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.7

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/s/suspicious-mountain-zroyy1?file=/pages/test.jsx

Describe your issue

The transition component is rendering strangely and there is a mismatch between the server and the client due to this.

When the options are as={Fragment}, show={true} and appear=true, in CSR (by clicking next/link in root page) it is working correctly merging child className and the transition props like enterFrom, enter, enterTo. But in SSR, the Transition component replaces the className of the child. In the reproduction URL I attached, the transition component replaced className="relative w-full h-full" with className="opacity-100 translate-x-0".

Warning: Prop className did not match. Server: "transition duration-500 delay-[500ms] opacity-0 translate-x-5" Client: "relative w-full h-full".

I went back to version 1.6.0 but the bug continued, and from 1.5.0 onwards, the component disappeared from the html tree (probably I did something wrong)

[zero734kr]

👍🎉

[thecrypticace]

Thanks for reporting this! The fix for this has been merged in #2173 and will be available in our next release. In the meantime you can test it before then by using our insiders build: npm install @headlessui/react@insiders

✨

[natedunn]

@thecrypticace I might be missing something, but latest version still has this issue? I have it locally, but I can also fork the example provided by @zero734kr, update the package to latest, and still see the same mismatch error described above.

[devgioele]

I confirm having the same issue. Even with version 1.7.13. It happens whenever appear is true. I am not using the as prop.

[natedunn]

@thecrypticace i don't think its worth opening another issue, to prevent confusion. If you can duplicate, can you reopen this issue? Thank you!

[thecrypticace]

I haven't tried to duplicate this yet (sorry!). Re-opening as a reminder for me to look at.

[thecrypticace]

Hey! This should be properly fixed now (via #2390), and will be available in the next release.

You can already try it using npm install @headlessui/react@insiders.

[natedunn]

@thecrypticace Things are looking good so far are on my end. Thanks for working on this again!