fix(react-router): honor preventScriptHoist during hydration - #8036
Open
grayashh wants to merge 1 commit into
Open
fix(react-router): honor preventScriptHoist during hydration#8036grayashh wants to merge 1 commit into
grayashh wants to merge 1 commit into
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthrough
ChangesScript hydration
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
grayashh
force-pushed
the
fix/script-prevent-hoist-hydration
branch
from
August 11, 2026 08:14
43df437 to
fde43c4
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #7775
Problem
When
<Scripts />is mounted inside an element (or directly in<body>), every load produces a hydration mismatch once the Start manifest injects asrcscript such as the client entry. In production builds it surfaces as minified React error #418.preventScriptHoistis only honored in the server branch ofScriptinAsset.tsx. SSR attachesonLoad: noopScriptHandler, so React leaves the async src script in place in the body. The client!hydratedbranch ignores the flag and renders<script {...attrs} suppressHydrationWarning />. Withasync, a stringsrc, and no event handler, react-dom treats that as a hoistable resource and hoists it into<head>during hydration, so the server-rendered body script node is never claimed and hydration fails.suppressHydrationWarningdoesn't help because it only covers attribute and text diffs, not structural ones.Fix
Apply the same guard to the client
!hydratedbranch: whenpreventScriptHoistis set, attachonLoad={noopScriptHandler}so the hydration render matches the server output and the script stays in place.Test
Added a test that renders a router with a manifest src script to string on the server, then hydrates the same markup with
hydrateRootand assertsonRecoverableErroris never called. Without the fix it fails with "Hydration failed because the server rendered HTML didn't match the client", the exact error from the issue.Follow-up to my analysis comment on #7775. We had been running this change as a pnpm patch in two production TanStack Start apps: hydration mismatches went from one per load to zero, and the surviving body script is cleaned up by React after hydration with no double execution.
Summary by CodeRabbit