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:
Steps To Reproduce
- Create a React app that contains a
<script src="foo" defer />
- Save it to an HTML with
react-dom/static#prerenderToNodeStream
- Hydrate the app on the browser with
react-dom/client#hydrateRoot
Link to code example:
https://gist.github.com/cprecioso/e639bc150f5c22a7078d3878ddebce22
run node ./test.js
The current behavior
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 data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
<App>
<html>
<head>
<script src="app.js" defer={true}>
-
...
The expected behavior
Hydrates with no warnings
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:
Steps To Reproduce
<script src="foo" defer />react-dom/static#prerenderToNodeStreamreact-dom/client#hydrateRootLink to code example:
https://gist.github.com/cprecioso/e639bc150f5c22a7078d3878ddebce22
run
node ./test.jsThe current behavior
Prints a hydration warning
The expected behavior
Hydrates with no warnings