#36330 [Bug]: `@storybook/tanstack-react` crashes with `TanStack Router` `1.170.36` (`path.endsWith is not a function`)

Describe the bug

@storybook/[email protected] is incompatible with @tanstack/[email protected], released as part of the TanStack Router 2026-09-13 release.

After upgrading from @tanstack/[email protected] to 1.170.36, every story fails before rendering with:

TypeError: path.endsWith is not a function
    at interpolatePath (...)
    at createStoryRouter (.../@storybook/tanstack-react/...)
    at routerBeforeEach (.../@storybook/tanstack-react/...)

The issue also affects ordinary component stories that do not use routing parameters because @storybook/tanstack-react creates a router for every story.

Severity: High

This breaks Storybook entirely for newly created or newly installed TanStack Router applications. @storybook/[email protected] declares these peer dependency ranges:

{
  "@tanstack/react-router": "^1.168.10",
  "@tanstack/router-core": "^1.168.9"
}

A fresh installation therefore resolves the incompatible versions automatically. Users following the official setup documentation can get a completely unusable Storybook without making any router-specific story configuration.

Root cause

@tanstack/[email protected] resolves @tanstack/[email protected].

TanStack Router commit d76a33284b — consolidate interpolation caches removed the previous object-returning interpolatePath wrapper.

Before @tanstack/[email protected], Storybook's call was valid:

interpolatePath({
  path: inferredPath,
  params: routerParameters?.params ?? {},
}).interpolatedPath;

In @tanstack/[email protected], the exported function instead has a positional signature and returns a string:

interpolatePath(path, segments, params, decoder?, usedParams?)

Storybook still passes an object as the first argument. Router Core consequently evaluates path.endsWith('/') where path is { path, params }, producing the exception.

The affected Storybook code is in code/frameworks/tanstack-react/src/routing/decorator.tsx.

Expected behavior

@storybook/tanstack-react should render stories using currently supported TanStack Router releases.

The framework should add a compatibility layer supporting both the pre-1.171.30 and current interpolation APIs, or avoid depending directly on this changeable Router Core helper. Compatibility tests should cover at least:

@tanstack/[email protected] / Router Core 1.171.29
@tanstack/[email protected] / Router Core 1.171.30
The latest supported TanStack Router version

Reproduction steps

Create or open a React application using TanStack Router.
Configure Storybook with @storybook/[email protected].
Install @tanstack/[email protected].
Add any ordinary component story; no route-specific parameters are required:

import preview from '#.storybook/preview';

const Component = () => <button>Example</button>;

const meta = preview.meta({
  component: Component,
});

export default meta;

export const Default = meta.story({});

Start Storybook with npm run storybook.
Open the story.

Every story fails during routerBeforeEach with:

TypeError: path.endsWith is not a function

Downgrading and pinning @tanstack/react-router to exactly 1.170.35 resolves the problem because that version depends on @tanstack/[email protected], which still supports the API used by Storybook.

System

Storybook Environment Info:

System:
  OS: macOS 26.5.2
  CPU: (8) arm64 Apple M1 Pro
  Shell: 5.9 - /bin/zsh

Binaries:
  Node: 24.13.0
  Yarn: 1.22.22
  npm: 11.6.2
  pnpm: 10.25.0

Browsers:
  Chrome: 152.0.7977.83
  Firefox: 155.0.1
  Safari: 26.5.2

npmPackages:
  @storybook/addon-a11y: ^10.6.0 => 10.6.0
  @storybook/addon-docs: ^10.6.0 => 10.6.0
  @storybook/addon-mcp: ^10.6.0 => 10.6.0
  @storybook/addon-vitest: ^10.6.0 => 10.6.0
  @storybook/tanstack-react: ^10.6.0 => 10.6.0
  storybook: ^10.6.0 => 10.6.0

Relevant dependencies:
  @tanstack/react-router: 1.170.36
  @tanstack/router-core: 1.171.30
  react: 19.3.0
  react-dom: 19.3.0
  vite: 8.3.0

Additional context

The incompatibility is not currently documented in the Storybook for TanStack React documentation. Its requirements only state that @tanstack/react-router must be installed, without warning about the incompatible release.

Until a compatibility layer is released, the documentation should prominently recommend pinning the router to the last compatible version:

{
  "dependencies": {
    "@tanstack/react-router": "1.170.35"
  }
}

The version must be pinned exactly rather than using ^1.170.35, because the caret range resolves 1.170.36 and reproduces the failure.

Related TanStack release and versions: