Open tavoyne opened 1 month ago
Hello @tavoyne! Thank you for opening this issue.
I can see that relevant hydration issues in Remix are resolved with a Canary version of React. 🤔 Can you please try installing React 19 RC and see if the issue persists?
npm i react@rc react-dom@rc
If you can't use React 19 due to dependency restrictions, try the following:
"dependencies": {
"react": "18.3.0-canary-a870b2d54-20240314",
"react-dom": "18.3.0-canary-a870b2d54-20240314",
},
"overrides": {
"react": "18.3.0-canary-a870b2d54-20240314",
"react-dom": "18.3.0-canary-a870b2d54-20240314"
},
I tried with your provided repository and it seems that the error goes away, but maybe you could try in your main project and see if it resolves the issues.
references:
Preliminary Checks
[X] I have reviewed the documentation: https://clerk.com/docs
[X] I have searched for existing issues: https://github.com/clerk/javascript/issues
[X] I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
[X] This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.
Reproduction
https://github.com/tavoyne/clerk-error
Publishable key
pk_test_Y2xvc2luZy1lbGstOTcuY2xlcmsuYWNjb3VudHMuZGV2JA
Description
If you try to load the home page, you'll see the following error in the console:
This hydration error causes the entire component tree to be re-rendered.
When you remove the
ClerkApp()
HOC inroot.tsx
, the document is properly hydrated and the error disappears.This also happens in production.
Environment