T
TanStack•2y ago
metropolitan-bronze

TanStackRouterDevtools error

when using lazy TanStackRouterDevtools I get errors "A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition." im using file based routing, with vite. __root.tsx 
const TanStackRouterDevtools =
  process.env.NODE_ENV === "production"
    ? () => null // Render nothing in production
    : React.lazy(() =>
        // Lazy load in development
        import("@tanstack/router-devtools").then((res) => ({
          default: res.TanStackRouterDevtools,
          // For Embedded Mode
          // default: res.TanStackRouterDevtoolsPanel
        })),
      );

// Set up a Router instance
export const Route = new RootRoute({
  component: RootComponent,
});

function RootComponent() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      transformer: superjson,
      links: [
        httpBatchLink({
          url: "http://localhost:4000/trpc",
        }),
      ],
    }),
  );

  return (
    <>
      <trpc.Provider client={trpcClient} queryClient={queryClient}>
        <QueryClientProvider client={queryClient}>
          <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
            <div className="App">
              <Outlet />
            </div>
          </ThemeProvider>
        </QueryClientProvider>
      </trpc.Provider>
      <TanStackRouterDevtools />
    </>
  );
}
const TanStackRouterDevtools =
  process.env.NODE_ENV === "production"
    ? () => null // Render nothing in production
    : React.lazy(() =>
        // Lazy load in development
        import("@tanstack/router-devtools").then((res) => ({
          default: res.TanStackRouterDevtools,
          // For Embedded Mode
          // default: res.TanStackRouterDevtoolsPanel
        })),
      );

// Set up a Router instance
export const Route = new RootRoute({
  component: RootComponent,
});

function RootComponent() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      transformer: superjson,
      links: [
        httpBatchLink({
          url: "http://localhost:4000/trpc",
        }),
      ],
    }),
  );

  return (
    <>
      <trpc.Provider client={trpcClient} queryClient={queryClient}>
        <QueryClientProvider client={queryClient}>
          <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
            <div className="App">
              <Outlet />
            </div>
          </ThemeProvider>
        </QueryClientProvider>
      </trpc.Provider>
      <TanStackRouterDevtools />
    </>
  );
}
using import { TanStackRouterDevtools } from '@tanstack/router-devtools' fixes everything, but I'd like the lazy loading version.
2 Replies
stormy-gold
stormy-gold•2y ago
how about wrapping TanStackRouterDevtools in Suspense? 
<Suspense>
  <TanStackRouterDevtools />
</Suspense>
<Suspense>
  <TanStackRouterDevtools />
</Suspense>
metropolitan-bronze
metropolitan-bronzeOP•2y ago
thanks, it worked

Did you find this page helpful?