Skip to content

fix(react-router): honor preventScriptHoist during hydration - #8036

Open
grayashh wants to merge 4 commits into
TanStack:mainfrom
grayashh:fix/script-prevent-hoist-hydration
Open

fix(react-router): honor preventScriptHoist during hydration#8036
grayashh wants to merge 4 commits into
TanStack:mainfrom
grayashh:fix/script-prevent-hoist-hydration

Conversation

@grayashh

@grayashh grayashh commented Aug 11, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown

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 a src script such as the client entry. In production builds it surfaces as minified React error #418.

preventScriptHoist is only honored in the server branch of Script in Asset.tsx. SSR attaches onLoad: noopScriptHandler, so React leaves the async src script in place in the body. The client !hydrated branch ignores the flag and renders <script {...attrs} suppressHydrationWarning />. With async, a string src, 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. suppressHydrationWarning doesn't help because it only covers attribute and text diffs, not structural ones.

Fix

Apply the same guard to the client !hydrated branch: when preventScriptHoist is set, attach onLoad={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 hydrateRoot and asserts onRecoverableError is 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

  • Bug Fixes
    • Fixed script placement during client hydration when script hoisting is disabled.
    • Manifest-provided module scripts now remain in their intended document position without causing hydration errors.
    • Improved hydration reliability for pages containing module scripts, helping preserve rendered content and prevent recoverable hydration issues.

@coderabbitai

coderabbitai Bot commented Aug 11, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 6310b7f0-7900-4400-a578-a1ab2e33db0c

📥 Commits

Reviewing files that changed from the base of the PR and between f97188f and 0ecce35.

📒 Files selected for processing (2)
  • packages/react-router/src/Asset.tsx
  • packages/react-router/tests/Scripts.test.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/react-router/src/Asset.tsx
  • packages/react-router/tests/Scripts.test.tsx

Included review availability: Your plan includes up to 10 reviews per rolling hour; 9 remain after this review.

📝 Walkthrough

Walkthrough

Script now preserves preventScriptHoist during client hydration. A new SSR-to-client test verifies that manifest module scripts hydrate without recoverable errors.

Changes

Script hydration

Layer / File(s) Summary
Hydration script rendering
packages/react-router/src/Asset.tsx		 The hydrated src script branch adds a no-op onLoad handler when preventScriptHoist is enabled.
SSR-to-client hydration validation
packages/react-router/tests/Scripts.test.tsx		 The test hydrates server-rendered manifest module scripts with hydrateRoot, checks the content and recoverable errors, and cleans up the root and container.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 0ecce

The change keeps scripts with preventScriptHoist in place during hydration and adds coverage for the mismatch scenario; no actionable merge-blocking risk remains beyond normal checks and review.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and concisely describes honoring preventScriptHoist during hydration, which is the primary change.
Linked Issues check ✅ Passed The change preserves nested scripts during hydration and adds a test for the hydration mismatch described in issue #7775.
Out of Scope Changes check ✅ Passed The implementation and hydration test directly support the linked issue and stated objectives.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@grayashh
grayashh force-pushed the fix/script-prevent-hoist-hydration branch from 43df437 to fde43c4 Compare August 11, 2026 08:14
@coderabbitai

coderabbitai Bot commented Aug 18, 2026

Copy link
Copy Markdown
Contributor

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Hydration mismatch when <Scripts /> is mounted inside element

1 participant

@grayashh