Tanstack router with Storybook

[socker210]

I'm currently using tanstack router with Storybook and I faced this error:

Cannot destructure property 'navigate' of 'useRouter(...)' as it is null.
TypeError: Cannot destructure property 'navigate' of 'useRouter(...)' as it is null.
    at useNavigate (http://localhost:6006/node_modules/.cache/storybook/2ad62ae32bbf22cd14b166eccc0fee180afdf16d3d234076c212e975dd52f126/sb-vite/deps/chunk-Z7SN7WNH.js?v=a2cbb6ff:3457:11)
    at Header (http://localhost:6006/src/pages/Setting/Header/Header.tsx:69:20)
    at renderWithHooks (http://localhost:6006/node_modules/.cache/storybook/2ad62ae32bbf22cd14b166eccc0fee180afdf16d3d234076c212e975dd52f126/sb-vite/deps/chunk-HTOLHPKM.js?v=a2cbb6ff:12171:26)
    at mountIndeterminateComponent (http://localhost:6006/node_modules/.cache/storybook/2ad62ae32bbf22cd14b166eccc0fee180afdf16d3d234076c212e975dd52f126/sb-vite/deps/chunk-HTOLHPKM.js?v=a2cbb6ff:14921:21)
    at beginWork (http://localhost:6006/node_modules/.cache/storybook/2ad62ae32bbf22cd14b166eccc0fee180afdf16d3d234076c212e975dd52f126/sb-vite/deps/chunk-HTOLHPKM.js?v=a2cbb6ff:15902:22)
    at beginWork$1 (http://localhost:6006/node_modules/.cache/storybook/2ad62ae32bbf22cd14b166eccc0fee180afdf16d3d234076c212e975dd52f126/sb-vite/deps/chunk-HTOLHPKM.js?v=a2cbb6ff:19749:22)
    at performUnitOfWork (http://localhost:6006/node_modules/.cache/storybook/2ad62ae32bbf22cd14b166eccc0fee180afdf16d3d234076c212e975dd52f126/sb-vite/deps/chunk-HTOLHPKM.js?v=a2cbb6ff:19194:20)
    at workLoopSync (http://localhost:6006/node_modules/.cache/storybook/2ad62ae32bbf22cd14b166eccc0fee180afdf16d3d234076c212e975dd52f126/sb-vite/deps/chunk-HTOLHPKM.js?v=a2cbb6ff:19133:13)
    at renderRootSync (http://localhost:6006/node_modules/.cache/storybook/2ad62ae32bbf22cd14b166eccc0fee180afdf16d3d234076c212e975dd52f126/sb-vite/deps/chunk-HTOLHPKM.js?v=a2cbb6ff:19112:15)
    at recoverFromConcurrentError (http://localhost:6006/node_modules/.cache/storybook/2ad62ae32bbf22cd14b166eccc0fee180afdf16d3d234076c212e975dd52f126/sb-vite/deps/chunk-HTOLHPKM.js?v=a2cbb6ff:18732:28)

I just added provider with routes like this in storybook preview.tsx file:

...
decorators: [
    (Story) => {
      return (
          ...
          <RouterProvider router={router} />
          <Story />
          ...
      )
    },
  ],
...

How can I solve this error?

[Jurek-Raben]

I have a similar question. Trying to setup Storybook v8.05 with Tanstack Router. My preview.jsx of Storybook looks like this:

...
const dummyRouteTree = (Story) => {
  const rootRoute = createRootRoute({ component: () => <Outlet /> });
  return {
    routeTree: rootRoute.addChildren([
      createFileRoute('/')({
        component: () => (
          <Suspense fallback={<div>loading...</div>}>
            <I18nextProvider i18n={i18n}>
              <Story />
            </I18nextProvider>
          </Suspense>
        ),
        getParentRoute: () => rootRoute,
      }),
    ]),
  };
};

const withDecorators = (Story) => {
  return <RouterProvider router={createRouter(dummyRouteTree(Story))} />;
};

// export decorators for storybook to wrap your stories in
export const decorators = [withDecorators];

But I get the following error:
Invariant failed: Duplicate routes found with id: __root__

Can't find the mistake, please help!

[Jurek-Raben]

EDIT: Found a working solution:

const dummyRouteTree = (Story) => {
  const rootRoute = createRootRoute({ component: () => <Outlet /> });
  return {
    routeTree: rootRoute.addChildren([
      createFileRoute('/*')().update({
        path: '/*',
        component: () => (
          <Suspense fallback={<div>loading...</div>}>
            <I18nextProvider i18n={i18n}>
              <Story />
            </I18nextProvider>
          </Suspense>
        ),
        getParentRoute: () => rootRoute,
      }),
    ]),
  };
};

const withDecorators = (Story) => {
  return <RouterProvider router={createRouter(dummyRouteTree(Story))} />;
};

// export decorators for storybook to wrap your stories in
export const decorators = [withDecorators];

[thienandangthanh]

I faced the same error as @socker210.
And I come across this answer #952 (comment).
It works in my projects.

[socker210]

@Jurek-Raben @thienandangthanh Thank you guys 😄