Devtools: TypeError: Cannot read properties of null (reading '__store')

[igortas]

Hi,

When I like to render the router devtools, I'm getting error: TypeError: Cannot read properties of null (reading '__store')

The snipper is like this:

Router.tsx

import { CircularProgress } from '@mui/material';
import type { QueryClient } from '@tanstack/react-query';
import { routeTree } from '../../routeTree.gen';
import { ErrorComponent, createRouter } from '@tanstack/react-router';

export const router = (queryClient: QueryClient) =>
  createRouter({
    routeTree,
    defaultPendingComponent: () => <CircularProgress />,
    defaultErrorComponent: ({ error }: any) => <ErrorComponent error={error} />,
    context: {
      queryClient
    },
    defaultPreload: 'intent',
    // Since we're using React Query, we don't want loader calls to ever be stale
    // This will ensure that the loader is always called when the route is preloaded or visited
    defaultPreloadStaleTime: 0
  });

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router;
  }
}

RQProvider.tsx

import {
  QueryClientProvider as RQProvider,
  QueryClient
} from '@tanstack/react-query';
import { RouterProvider } from '@tanstack/react-router';
import {
  lazy,
  useEffect,
  type ReactNode,
  useState,
  Suspense,
  useMemo
} from 'react';
import { router } from 'utils/routes/main';

const queryClient = new QueryClient(});

const ReactQueryDevtools = lazy(() =>
  import('@tanstack/react-query-devtools').then((d) => ({
    default: d.ReactQueryDevtools
  }))
);

const ReactQueryRouterDevtools = lazy(() =>
  import('@tanstack/router-devtools').then((d) => ({
    default: d.TanStackRouterDevtools
  }))
);

export default function QueryClientProvider() {
  const [showDevtools, setShowDevtools] = useState(false);

  useEffect(() => {
    // @ts-ignore
    window.toggleDevtools = () => setShowDevtools((old) => !old);
  }, []);

  const route = useMemo(() => router(queryClient), [queryClient, router]);

  return (
    <RQProvider client={queryClient}>
      <RouterProvider router={route} />
      <ReactQueryDevtools initialIsOpen />
      <Suspense fallback={null}>
        <ReactQueryRouterDevtools initialIsOpen router={route} />
      </Suspense>
      {showDevtools && (
        <>
          <ReactQueryDevtools />
          <ReactQueryRouterDevtools />
        </>
      )}
    </RQProvider>
  );
}

Error stack:

useRouterState.tsx:16  Uncaught TypeError: Cannot read properties of null (reading '__store')
    at useRouterState (useRouterState.tsx:16:51)
    at RouteComp (devtools.tsx:319:23)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26557:12)

package.json

 "@tanstack/react-router": "^1.20.0",
 "@tanstack/router-devtools": "^1.20.0",
 "react": "^18.2.0",
 "react-dom": "^18.2.0"

I'm using React and vite, together with the codegen plugin.

BR,

[SeanCassiere]

If I'm not mistaken, because the TSR Devtools consumes react's context api for reactivity, you need it to be rendered inside the <RouterProvider />.

// src/routes/__root.tsx
const Route = createRootRoute({
  component: () => (
    <>
    <Outlet />
    <RouterDevtools />
    </>
  );
});

[SeanCassiere]

@igortas I've got fix for this, should ship once #1336 is shipped.

[schiller-manuel]

released in https://github.com/TanStack/router/releases/tag/v1.20.3