Remix.js React 18 Hydration Error

[emrekardaslar]

What version of Remix are you using?

1.7.2

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

• Install Ant Design and Cypress
• Run e2e tests

Hi Everyone!

I saw some closed issues on this error but I see there is not a definite solution. I created a remix app using the CLI and by default, it set React version to 18. When I tried to add a UI Library I got hydration errors (HTML mismatch) when I ran tests with Cypress. When I downgraded React version to 17 I saw that the tests could run without any errors but the style of components had differences (it is another issue). I also tried the way mentioned here https://github.com/kiliman/remix-hydration-fix and #5244 (comment). This way seemed like working but I feel that it is more like a complicated workaround rather than a solution. I feel like I should continue with React 17 for now but I wanted to ask your opinions on that issue.

Should I continue with React 17 for now until there is a more proper way or there is already a way for that?
When I used a UI Library like Ant Design, the CSS seems different when I close JavaScript. I also created a component library using TSDX and CSS modules and imported that library into my project. The styles look buggy on page transitions (just for a moment). Is there a solution to that?
Thanks!

Note: I also opened a discussion: #5568. I don't know if it should be a bug report or discussion so I opened both, I can close one of them.

Expected Behavior

• Not have any errors

Actual Behavior

• Hydration failed because the initial UI does not match what was rendered on the server

[quangv]

Could be related to: #4822 (comment)

Something I'm doing atm, using Firefox Dev Edition instead of Chrome, which doesn't show the error.

[brophdawg11]

Closing as a dup of #4822