TanStack: Respect routeOverrides component overrides in stories

[unpunnyfuns]

Follow-up to #35465.

What I did

routeOverrides component overrides were silently ignored. The guard in injectStoryComponent looked up the override with the cloned leaf's id getter, which is undefined before init().

The lookup never matched and the story component always replaced the component the override had installed.

The lookup now resolves the original (pre-clone) route id through the duplication map, which is the key users write in routeOverrides.

The second commit applies the unit-test review note from #35465: use vi.fn() instead of fn from storybook/test.

Manual testing

• cd code/frameworks/tanstack-react && yarn vitest run (55 tests).
• End to end: story-level conformance suite against a TanStack Router SPA
  and a TanStack Start app:
  https://github.com/unpunnyfuns/storybook-tanstack-conformance. The
  routeOverrides scenarios pass with this fix applied.

AI disclosure

Root-cause analysis, fix, and tests developed with Claude (Claude Code), reviewed and submitted by me.

Summary by CodeRabbit

Summary by CodeRabbit

• Bug Fixes

  • Fixed story routeOverrides so injected route components correctly honor overrides after route duplication and during router.load(), including pathless and synthetic route structures.
  • Improved override matching to use the story’s original route identity for consistent behavior across route shapes.

• New Features

  • Extended RouteOverrideOptions with an optional component override, with improved typing for file-based pre-loader routes.

• Tests

  • Added regression tests for createStoryRouter applying routeOverrides.
  • Updated tests to use Vitest mocking utilities for clearer assertions.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

TanStack story routing now resolves component overrides using original route identifiers across duplicated, provided, and synthetic route trees. Route override typing, injection logic, and regression tests were updated.

Changes

Route override matching

Layer / File(s)	Summary
Component override contract code/frameworks/tanstack-react/src/routing/types.ts	Adds a typed optional component property to RouteOverrideOptions.
Original route identifier lookup code/frameworks/tanstack-react/src/routing/duplicate-tree.ts	Adds originalRouteId to map duplicated route instances to their original route IDs.
Component injection and regression coverage code/frameworks/tanstack-react/src/routing/decorator.tsx, code/frameworks/tanstack-react/src/routing/decorator.test.ts, code/frameworks/tanstack-react/src/routing/duplicate-tree.test.ts	Updates override lookup for duplicated, provided, and plain-options routes, with tests for cloned route components and Vitest mocks.

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

Possibly related PRs

• storybookjs/storybook#35465: Updates related TanStack route duplication and override behavior.
• storybookjs/storybook#35496: Modifies related TanStack route override lookup and story injection logic.
• storybookjs/storybook#35499: Changes related TanStack route cloning and identifier handling.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[storybook-app-bot]

Package Benchmarks

^{Commit: bd94afb, ran on 27 July 2026 at 10:32:38 UTC}

The following packages have significant changes to their size or dependencies:

@storybook/builder-webpack5

	Before	After	Difference
Dependency count	186	186	0
Self size	79 KB	79 KB	🚨 +1 B 🚨
Dependency size	35.79 MB	36.18 MB	🚨 +392 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/angular

	Before	After	Difference
Dependency count	185	185	0
Self size	160 KB	160 KB	0 B
Dependency size	30.25 MB	30.64 MB	🚨 +392 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/ember

	Before	After	Difference
Dependency count	185	185	0
Self size	13 KB	13 KB	🚨 +18 B 🚨
Dependency size	31.14 MB	31.53 MB	🚨 +392 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/nextjs

	Before	After	Difference
Dependency count	531	531	0
Self size	640 KB	640 KB	🚨 +120 B 🚨
Dependency size	62.47 MB	62.86 MB	🚨 +392 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/nextjs-vite

	Before	After	Difference
Dependency count	94	93	🎉 -1 🎉
Self size	1.37 MB	1.37 MB	🚨 +48 B 🚨
Dependency size	23.91 MB	23.84 MB	🎉 -74 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/react-native-web-vite

	Before	After	Difference
Dependency count	125	122	🎉 -3 🎉
Self size	29 KB	29 KB	🚨 +18 B 🚨
Dependency size	25.90 MB	24.90 MB	🎉 -994 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/react-vite

	Before	After	Difference
Dependency count	83	83	0
Self size	32 KB	32 KB	🚨 +8 B 🚨
Dependency size	21.23 MB	21.61 MB	🚨 +386 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react-webpack5

	Before	After	Difference
Dependency count	272	272	0
Self size	23 KB	23 KB	🚨 +12 B 🚨
Dependency size	48.25 MB	48.64 MB	🚨 +392 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/server-webpack5

	Before	After	Difference
Dependency count	198	198	0
Self size	15 KB	15 KB	0 B
Dependency size	37.05 MB	37.44 MB	🚨 +392 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/svelte-vite

	Before	After	Difference
Dependency count	20	20	0
Self size	54 KB	54 KB	🎉 -22 B 🎉
Dependency size	26.65 MB	27.04 MB	🚨 +386 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/sveltekit

	Before	After	Difference
Dependency count	21	21	0
Self size	56 KB	56 KB	0 B
Dependency size	26.70 MB	27.09 MB	🚨 +386 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/tanstack-react

	Before	After	Difference
Dependency count	84	84	0
Self size	113 KB	112 KB	🎉 -367 B 🎉
Dependency size	21.26 MB	21.64 MB	🚨 +386 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/vue3-vite

	Before	After	Difference
Dependency count	103	102	🎉 -1 🎉
Self size	34 KB	34 KB	🎉 -37 B 🎉
Dependency size	43.10 MB	43.03 MB	🎉 -74 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/preset-react-webpack

	Before	After	Difference
Dependency count	161	161	0
Self size	19 KB	19 KB	🚨 +25 B 🚨
Dependency size	32.76 MB	33.15 MB	🚨 +392 KB 🚨
Bundle Size Analyzer	Link	Link