TanStack: Resolve mock redirects through Vite's resolver by unpunnyfuns · Pull Request #35501 · storybookjs/storybook

unpunnyfuns · 2026-07-15T16:26:29Z

What I did

Spy assertions through @storybook/tanstack-react/react-router (the documented module for asserting on the automatic mocks) never saw calls.

The interception plugin returned raw file paths for mock redirects, while a direct import of the same module resolves through Vite, which stamps a version query on the id. Same file, two module instances: the spy a story imports is not the spy the app calls.

The plugin now resolves through this.resolve(), so both import paths share one module.

Covered end to end rather than by a unit test: reproducing the split requires Vite's resolver and import analysis, which unit tests stub away.

Manual testing

cd code/frameworks/tanstack-react && yarn vitest run (54 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.

A story clicks a pagination button and asserts expect(useNavigate).toHaveBeenCalled() with useNavigate imported from @storybook/tanstack-react/react-router; it fails on next and passes with this fix.

AI disclosure

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

Summary by CodeRabbit

Bug Fixes
- Improved module interception so intercepted mock modules are routed through the build system’s resolver, resulting in correct resolution across router, server/start, storage-context, and virtual/worker-related patterns.
- Added consistent fallback when resolver resolution is unavailable.
Tests
- Added Vitest coverage for resolveId interception behavior, including cases where interception is skipped, resolver fallback is used, and unrelated imports remain unaffected.

coderabbitai · 2026-07-16T16:33:44Z

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

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b9139711-9b0c-47bd-850f-01a49143b0d4

📥 Commits

Reviewing files that changed from the base of the PR and between a9896b1 and 2205a8f.

📒 Files selected for processing (1)

code/frameworks/tanstack-react/src/plugins/module-interception.test.ts

🚧 Files skipped from review as they are similar to previous changes (1)

code/frameworks/tanstack-react/src/plugins/module-interception.test.ts

📝 Walkthrough

Walkthrough

The TanStack React module interception plugin now resolves intercepted mock modules through Vite, falling back to configured mock paths when resolution is unavailable. Tests cover interception, guard conditions, resolver fallback, and unrelated imports.

Changes

TanStack mock module resolution

Layer / File(s)	Summary
Resolve intercepted mock paths `code/frameworks/tanstack-react/src/plugins/module-interception.ts`, `code/frameworks/tanstack-react/src/plugins/module-interception.test.ts`	Routes router, Start, storage-context, and pattern-matched imports through Vite’s resolver, with fallback to raw mock paths and tests for guards and unrelated imports.

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

Possibly related PRs

storybookjs/storybook#35496: Updates the same module interception handler to resolve intercepted TanStack mock module IDs through Vite.

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.}

coderabbitai

🧹 Nitpick comments (1)

code/frameworks/tanstack-react/src/plugins/module-interception.test.ts (1)
42-42: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Consider using .toEqual() to avoid type assertions.

Since the mocked resolve function directly returns an object structured as { id: string }, you can eliminate the (result as { id: string }) type assertion by checking the deep equality of the entire returned object.

Note: This pattern also applies to similar assertions on lines 47, 76, 81, and 88.
💡 Proposed refactor
-      expect((result as { id: string }).id).toBe('/mocks/react-router.ts?v=abc123');
+      expect(result).toEqual({ id: '/mocks/react-router.ts?v=abc123' });
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@code/frameworks/tanstack-react/src/plugins/module-interception.test.ts` at
line 42, Update the assertions for the mocked resolve results to use deep
equality against the expected `{ id: string }` object, removing the `(result as
{ id: string })` type assertions. Apply this consistently to the similar
assertions referenced on lines 47, 76, 81, and 88.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@code/frameworks/tanstack-react/src/plugins/module-interception.test.ts`:
- Line 42: Update the assertions for the mocked resolve results to use deep
equality against the expected `{ id: string }` object, removing the `(result as
{ id: string })` type assertions. Apply this consistently to the similar
assertions referenced on lines 47, 76, 81, and 88.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 35dc34c9-1de9-4535-9194-781592f0c15e

📥 Commits

Reviewing files that changed from the base of the PR and between e5e2fba and de5d6e2.

📒 Files selected for processing (1)

code/frameworks/tanstack-react/src/plugins/module-interception.test.ts

The interception plugin returned raw file paths for the mock modules. Direct user imports of the same mocks (the documented '@storybook/tanstack-react/react-router' spy-assertion path) resolve through Vite, which stamps a version query on the id, so the same file registered as two module instances and user assertions saw spies the app never called. Resolve through this.resolve() so both import paths share one module. Found by asserting on the useNavigate spy in the conformance suite.

Add unit tests for the interception plugin: router and start mocks resolve through Vite (so direct mock imports share one module instance), the circular guard for mock importers, intercepted patterns, and the raw-path fallback.

storybook-app-bot · 2026-07-24T09:30:22Z

Package Benchmarks

^{Commit: 2205a8f, ran on 31 July 2026 at 09:16:49 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	🚨 +49 B 🚨
Dependency size	35.73 MB	36.13 MB	🚨 +392 KB 🚨
Bundle Size Analyzer	Link	Link

`storybook`

	Before	After	Difference
Dependency count	73	73	0
Self size	21.39 MB	21.31 MB	🎉 -81 KB 🎉
Dependency size	36.75 MB	31.22 MB	🎉 -5.53 MB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/angular`

	Before	After	Difference
Dependency count	185	185	0
Self size	160 KB	160 KB	🎉 -54 B 🎉
Dependency size	30.13 MB	30.52 MB	🚨 +392 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/angular-vite`

	Before	After	Difference
Dependency count	36	36	0
Self size	33.41 MB	33.41 MB	🎉 -2 KB 🎉
Dependency size	21.34 MB	15.80 MB	🎉 -5.54 MB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/ember`

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

`@storybook/nextjs`

	Before	After	Difference
Dependency count	531	531	0
Self size	641 KB	640 KB	🎉 -1 KB 🎉
Dependency size	62.41 MB	62.81 MB	🚨 +404 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/nextjs-vite`

	Before	After	Difference
Dependency count	94	93	🎉 -1 🎉
Self size	1.42 MB	1.37 MB	🎉 -48 KB 🎉
Dependency size	23.91 MB	23.85 MB	🎉 -62 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	0 B
Dependency size	25.90 MB	24.91 MB	🎉 -982 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/react-vite`

	Before	After	Difference
Dependency count	83	83	0
Self size	32 KB	32 KB	🎉 -10 B 🎉
Dependency size	21.22 MB	21.62 MB	🚨 +398 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.19 MB	48.59 MB	🚨 +404 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.00 MB	37.39 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	🎉 -10 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.71 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	113 KB	🎉 -169 B 🎉
Dependency size	21.25 MB	21.65 MB	🚨 +398 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/vue3-vite`

	Before	After	Difference
Dependency count	103	102	🎉 -1 🎉
Self size	34 KB	34 KB	🎉 -252 B 🎉
Dependency size	43.11 MB	43.04 MB	🎉 -73 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	205	205	0
Self size	827 KB	827 KB	🚨 +52 B 🚨
Dependency size	91.60 MB	85.99 MB	🎉 -5.61 MB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	198	198	0
Self size	32 KB	32 KB	🚨 +36 B 🚨
Dependency size	90.08 MB	84.46 MB	🎉 -5.61 MB 🎉
Bundle Size Analyzer	Link	Link

`create-storybook`

	Before	After	Difference
Dependency count	74	74	0
Self size	1.09 MB	1.09 MB	🚨 +53 B 🚨
Dependency size	58.14 MB	52.52 MB	🎉 -5.61 MB 🎉
Bundle Size Analyzer	node	node

`@storybook/preset-react-webpack`

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

`@storybook/react`

	Before	After	Difference
Dependency count	59	59	0
Self size	1.48 MB	1.49 MB	🚨 +12 KB 🚨
Dependency size	12.30 MB	12.30 MB	🚨 +143 B 🚨
Bundle Size Analyzer	Link	Link

….test.ts

…act-mock-module-resolution TanStack: Resolve mock redirects through Vite's resolver (cherry picked from commit cdd4f9e)

github-actions Bot added the agent-scan:human label Jul 15, 2026

unpunnyfuns marked this pull request as ready for review July 16, 2026 16:30

This was referenced Jul 16, 2026

TanStack: Keep Start's document shell out of stories #35504

Merged

TanStack: Support pathless file routes / layout routes #35193

Open

coderabbitai Bot reviewed Jul 17, 2026

View reviewed changes

unpunnyfuns added 2 commits July 18, 2026 17:15

test(tanstack-react): cover module interception resolveId

b7b5488

Add unit tests for the interception plugin: router and start mocks resolve through Vite (so direct mock imports share one module instance), the circular guard for mock importers, intercepted patterns, and the raw-path fallback.

unpunnyfuns force-pushed the fix/tanstack-react-mock-module-resolution branch from de5d6e2 to b7b5488 Compare July 18, 2026 15:15

huang-julien approved these changes Jul 24, 2026

View reviewed changes

Comment thread code/frameworks/tanstack-react/src/plugins/module-interception.ts Outdated

Update code/frameworks/tanstack-react/src/plugins/module-interception.ts

dc16219

huang-julien requested a review from a team July 24, 2026 09:16

huang-julien self-assigned this Jul 24, 2026

huang-julien added bug patch:yes Bugfix & documentation PR that need to be picked to main branch ci:normal Run our default set of CI jobs (choose this for most PRs). tanstack qa:skip Pull Requests that do not need any QA. (e.g. documentation) labels Jul 24, 2026

Merge branch 'next' into fix/tanstack-react-mock-module-resolution

a9896b1

huang-julien enabled auto-merge July 24, 2026 09:17

valentinpalkovic added this to Core Team Projects Jul 24, 2026

huang-julien reviewed Jul 24, 2026

View reviewed changes

Comment thread code/frameworks/tanstack-react/src/plugins/module-interception.test.ts

huang-julien added 2 commits July 24, 2026 13:39

Update code/frameworks/tanstack-react/src/plugins/module-interception…

61b4f9a

….test.ts

Merge branch 'next' into fix/tanstack-react-mock-module-resolution

2205a8f

huang-julien merged commit cdd4f9e into storybookjs:next Jul 24, 2026
130 checks passed

github-project-automation Bot moved this to Done in Core Team Projects Jul 24, 2026

This was referenced Jul 24, 2026

Release: Prerelease 10.6.0-alpha.4 #35583

Closed

Release: Patch 10.5.5 #35581

Merged

Release: Prerelease 10.6.0-alpha.4 #35603

Closed

ndelangen added patch:done Patch/release PRs already cherry-picked to main/release branch and removed patch:yes Bugfix & documentation PR that need to be picked to main branch labels Jul 27, 2026

ndelangen mentioned this pull request Jul 27, 2026

CI: Patch release workflow fails to label PRs with patch:done (permission regression on latest-release) #35607

Closed

github-actions Bot mentioned this pull request Jul 28, 2026

Release: Prerelease 10.6.0-alpha.4 #35617

Merged

2 tasks done

unpunnyfuns mentioned this pull request Jul 28, 2026

Upstream PR: opt-in real in-story navigation (submit last, on top of the fix stack) unpunnyfuns/storybook-tanstack-conformance#1

Open

7 tasks

valentinpalkovic added the sev:S2 High priority. Fix within weeks. label Jul 31, 2026

This was referenced Aug 13, 2026

chore(deps): bump @storybook/react-vite from 10.4.6 to 10.5.7 brandhaug/b2b-saas-starter#28

Merged

chore(deps): bump storybook from 10.4.6 to 10.5.7 brandhaug/b2b-saas-starter#39

Merged

Navigation Menu

Repository navigation

TanStack: Resolve mock redirects through Vite's resolver - #35501

TanStack: Resolve mock redirects through Vite's resolver#35501
huang-julien merged 6 commits into
storybookjs:nextfrom
unpunnyfuns:fix/tanstack-react-mock-module-resolution

unpunnyfuns commented Jul 15, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jul 16, 2026 •

edited

Loading

Reviews paused

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

storybook-app-bot Bot commented Jul 24, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

unpunnyfuns commented Jul 15, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Manual testing

AI disclosure

Summary by CodeRabbit

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jul 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

storybook-app-bot Bot commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Package Benchmarks

@storybook/builder-webpack5

storybook

@storybook/angular

@storybook/angular-vite

@storybook/ember

@storybook/nextjs

@storybook/nextjs-vite

@storybook/react-native-web-vite

@storybook/react-vite

@storybook/react-webpack5

@storybook/server-webpack5

@storybook/svelte-vite

@storybook/sveltekit

@storybook/tanstack-react

@storybook/vue3-vite

@storybook/cli

@storybook/codemod

create-storybook

@storybook/preset-react-webpack

@storybook/react

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

unpunnyfuns commented Jul 15, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 16, 2026 •

edited

Loading

storybook-app-bot Bot commented Jul 24, 2026 •

edited

Loading

`@storybook/builder-webpack5`

`storybook`

`@storybook/angular`

`@storybook/angular-vite`

`@storybook/ember`

`@storybook/nextjs`

`@storybook/nextjs-vite`

`@storybook/react-native-web-vite`

`@storybook/react-vite`

`@storybook/react-webpack5`

`@storybook/server-webpack5`

`@storybook/svelte-vite`

`@storybook/sveltekit`

`@storybook/tanstack-react`

`@storybook/vue3-vite`

`@storybook/cli`

`@storybook/codemod`

`create-storybook`

`@storybook/preset-react-webpack`

`@storybook/react`