Skip to content

bump tanstack to fix hydration issue coming from incorrect streaming - #1682

Merged
Pascal-Delange merged 1 commit into
mainfrom
pascal/fix-tanstack-ssr-streaming-nonce
Jun 24, 2026
Merged

bump tanstack to fix hydration issue coming from incorrect streaming#1682
Pascal-Delange merged 1 commit into
mainfrom
pascal/fix-tanstack-ssr-streaming-nonce

Conversation

@Pascal-Delange

@Pascal-Delange Pascal-Delange commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

Why

/detection/scenarios crashed during hydration in production (Invariant failed + React #423) once the list had ≥15 rows. Root cause was upstream in TanStack's streamed SSR: with router.options.ssr.nonce set, a nonce'd <script> was injected mid-serialized-value, splitting a string in the dehydration payload → SyntaxErrorwindow.$_TSR never populated → router throws Invariant failed on hydrate. Threshold was just where the payload spilled into a second stream chunk; prod-only because dev doesn't stream the document the same way.

In practice, the js code contained something like this :$R[83]=[null]},"019ef9b0-ce<script nonce="8f96db699952488dab05cd61bdd083e4">(function(t){let s;try{ with mismatched quotes.

Fixed upstream by the ScriptBuffer/streaming rewrite — TanStack/router#7362 (1.171.3) and TanStack/router#7497 "fix: fix streaming" (1.171.7), which prevents mid-tag script injection.

What

Bump the pinned @tanstack/* router/start set (root overrides + app-builder) to the aligned latest: react-router 1.170.16, react-start 1.168.26, router-core 1.171.13, start-server-core 1.169.15, etc. Type-check + prod build green; verified /detection/scenarios hydrates at 15+ rows.

Sources:

Summary by CodeRabbit

  • Bug Fixes
    • Corrected navigation so the Cases page opens the expected view.
    • Fixed route handling for detection scenario iteration pages, improving page resolution and access.

@Pascal-Delange
Pascal-Delange force-pushed the pascal/fix-tanstack-ssr-streaming-nonce branch from 506f8e0 to 0b4018d Compare June 24, 2026 13:50
@Pascal-Delange
Pascal-Delange marked this pull request as ready for review June 24, 2026 13:50
@Pascal-Delange
Pascal-Delange requested review from ChibiBlasphem and william-schlegel and removed request for ChibiBlasphem June 24, 2026 13:50
@coderabbitai coderabbitai Bot added the M medium label Jun 24, 2026
@coderabbitai

coderabbitai Bot commented Jun 24, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5a0871f8-eafe-4d37-8e84-942e0088b740

📥 Commits

Reviewing files that changed from the base of the PR and between 7e58b7f and 0b4018d.

⛔ Files ignored due to path filters (1)
  • bun.lock is excluded by !**/*.lock
📒 Files selected for processing (3)
  • package.json
  • packages/app-builder/package.json
  • packages/app-builder/src/routeTree.gen.ts
📜 Recent review details
⏰ Context from checks skipped due to timeout. (2)
  • GitHub Check: check / main
  • GitHub Check: e2e
🧰 Additional context used
📓 Path-based instructions (2)
packages/app-builder/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

packages/app-builder/src/**/*.{ts,tsx}: Use internal imports from @app-builder namespace for models, queries, components, and utilities
Use ui-design-system package for UI components (Button, Modal, Select) and utility functions (cn)
Use TanStack Query hooks with naming convention useGetXyzQuery for data fetching operations
Use ts-pattern for pattern matching with the match function instead of conditional logic
Use TanStack Form for form handling instead of manual form state management

Files:

  • packages/app-builder/src/routeTree.gen.ts
packages/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Use Tailwind CSS 4 with the tailwind-preset package for consistent styling across packages

Files:

  • packages/app-builder/src/routeTree.gen.ts
🔇 Additional comments (3)
package.json (1)

17-26: LGTM!

packages/app-builder/package.json (1)

24-25: LGTM!

Also applies to: 82-84

packages/app-builder/src/routeTree.gen.ts (1)

806-806: LGTM!

Also applies to: 881-881


📝 Walkthrough

Walkthrough

Bumps pinned @tanstack package versions (router, start, devtools, plugin, and associated core packages) in the root package.json and packages/app-builder/package.json. Also corrects two type mappings in the auto-generated routeTree.gen.ts, fixing the FileRoutesByFullPath entries for the /cases and /detection/scenarios/$scenarioId/i/$iterationId routes.

Changes

TanStack Upgrades and Route Tree Corrections

Layer / File(s) Summary
@tanstack dependency version bumps
package.json, packages/app-builder/package.json
Bumps pinned versions for @tanstack/react-router, @tanstack/react-start, @tanstack/react-router-devtools, @tanstack/router-plugin, and related core packages across root and app-builder manifests.
Generated route tree type mapping corrections
packages/app-builder/src/routeTree.gen.ts
Fixes two FileRoutesByFullPath entries: '/cases' now references AppBuilderCasesRouteWithChildren (was AppBuilderCasesDetailRouteWithChildren), and '/detection/scenarios/$scenarioId/i/$iterationId' now references the iteration root type instead of the edit-view type.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

Suggested labels

M

Poem

O tanstack, thou art bumped to newer art,
And route tree types now point with truer heart.
The /cases path doth shed its "detail" guise,
The iteration route, corrected, likewise.
Small changes these, yet vital to the whole —
A patch in time doth save the codebase soul. 🎭

🚥 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 matches the main change: bumping TanStack packages to fix the hydration/streaming issue.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch pascal/fix-tanstack-ssr-streaming-nonce

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.

@william-schlegel william-schlegel left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as always,

the latest version fixes that

@ChibiBlasphem ChibiBlasphem left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@Pascal-Delange
Pascal-Delange merged commit 83f26d5 into main Jun 24, 2026
7 checks passed
@Pascal-Delange
Pascal-Delange deleted the pascal/fix-tanstack-ssr-streaming-nonce branch June 24, 2026 14:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

M medium

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants