Bug: Hydration mismatch error due to plugins generating script tag on top
facebook/react 91 comments 1mo ago
mediumopenScope: somewhat clearSkill match: maybeReactJavaScriptTypeScript
Why this is a good first issue
Hydration mismatch error occurs due to external script tags.
AI Summary
The issue involves a hydration mismatch error when external plugins insert script tags before the head tag, causing UI breaks during hydration. The solution likely requires modifying how React handles hydration in such cases, but the exact fix is unclear and may involve server-side rendering logic.
Issue Description
React version: 18.0.0, 18.1.0-next-fc47cb1b6-20220404 (latest version in codesandbox)
Steps To Reproduce
- Install a plugin that creates a script tag at the top(ex: Apollo Client Devtools)
- Go to the demo in the new SSR suspense guide
- Open preview in a new window
- UI mismatch error occurs at hydration time
Link to code example: https://codesandbox.io/s/kind-sammet-j56ro?file=/src/App.js
The current behavior
If a script tag is inserted before the head tag due to the user's browser environment such as a plugin, it is judged as a hydration mismatch and the screen is broken.
https://user-images.githubusercontent.com/4126644/164953071-14546c74-d9ab-4a6f-8f99-6712f29c6dd6.mov
The expected behavior
This problem may b
GitHub Labels
Component: Server RenderingResolution: Backlog
Want to work on this?
Claim this issue to let others know you're working on it. You'll earn 20 points when you complete it!
Risk Flags
- hydration mismatch
- server-side rendering
Loading labels...
gnoff