Hydration error when using nonce on scripts on v1.16.0 #6394
Comments
|
Might not be related to the nonce after all. Remove that code in the other project I mentioned and the errors still persist. |
|
Ok so I installed the apollo client chrome extension around the same time which was causing this issue, probably because it's injecting scripts 🤦 |
|
I'm having the same issue with Apollo Client dev tools. None of my other extensions (1Password, etc) cause this issue. I'm brand new to Remix and this caused me some grief after picking my project apart piece by piece. I think it's worth reopening to the issue to notify developers who run into this strange issue. I haven't run into this problem on other stacks before. |
|
@kalebheitzman This is a known issue with Remix and React 18.2. The main reason is that Remix hydrates the entire document instead of Apparently React 18.3 will fix this problem, so you can try installing one of the pre-release builds. Another option is to use a fix like I describe in |
What version of Remix are you using?
1.16.0
Are all your remix dependencies & dev-dependencies using the same version?
Steps to Reproduce
I have a nonce solution that I saw in @kentcdodds his website its source code. This issue thread is related: #5162
Part of the implemtation on the server is here:
https://github.com/saltagency-io/saltagency.io/blob/master/app/entry.server.tsx#L84
The nonce is the applied to all scripts in
root.tsxImplementations are basically identical and work perfectly on v1.12.0 of remix, however when I tried to upgrade to v1.16.0 of remix, I suddenly get hydration issues, which i suspect are related to the nonce implemtation (I have another project that is on v1.16.0, where I'm currently implementing the same nonce solution and the hydration errors started appearing after that implementation).
Issue can be reproduced with the code on this branch: https://github.com/saltagency-io/saltagency.io/tree/chore/upgrade-remix-version
Expected Behavior
No hydration issues when using a nonce on script tags
Actual Behavior
Hydration issues are logged to the console:
The text was updated successfully, but these errors were encountered: