How do I get lazily loaded TanStack Router devtools to show up?

[do-kevin]

Hey folks,

So the devtools show up if I do this like in the docs:

import { TanStackRouterDevtools } from '@tanstack/router-devtools'

function App() {
  return (
    <>
      <Router />
      <TanStackRouterDevtools initialIsOpen={true} />
    </>
  )
}

However, I want to lazily load it. I tried something like this:

function App() {
  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
          })),
        )

  return (
    <>
      <Router />
            <TanStackRouterDevtools />
    </>

But the devtools won't show up. What other configuration or setup I have to do?

Also, I couldn't message on Discord since my phone number is used for a personal account. I wanted to join the Discord with my work account so that's why I posted here.

Reference: https://tanstack.com/router/v1/docs/devtools#only-importing-and-using-devtools-in-development

[do-kevin]

Figured it out from a YouTube tutorial.

Just move set router inside devtools like <TanStackRouterDevtools router={router} /> and it'll work.