Hydration mismatch caused by `<script defer>` usage in React.
The issue involves a hydration mismatch when using `<script defer>` in React, which is not recommended but currently causes errors. The problem is reproducible and documented, but the solution may require changes to how React handles deferred scripts during hydration. The scope is somewhat clear, but it involves SSR and hydration logic, which may require deeper React knowledge.
React version: 19.2.4
Any app that contains a <script defer>, will cause hydration errors. It is "not recommended" in React, but it either shouldn't cause errors or the docs should explicitly say to not use it.
Possibly related to:
<script src="foo" defer />react-dom/static#prerenderToNodeStreamreact-dom/client#hydrateRootLink to code example:
https://gist.github.com/cprecioso/e639bc150f5c22a7078d3878ddebce22
run node ./test.js
Prints a hydration warning
Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing d
Claim this issue to let others know you're working on it. You'll earn 20 points when you complete it!