[DevTools]: lazy loading TanstackRouterDevtools resolves to undefined

[Moshyfawn]

Describe the bug

Following the Only importing and using Devtools in Development section of Tanstack DevTools docs, lazy loading the TanstackRouterDevtools component yields undefined

Your Example Website or App

https://codesandbox.io/p/sandbox/modern-sound-tk8lsm?file=%2Fsrc%2FApp.tsx&selection=%5B%7B%22endColumn%22%3A40%2C%22endLineNumber%22%3A12%2C%22startColumn%22%3A40%2C%22startLineNumber%22%3A12%7D%5D&workspace=%257B%2522activeFileId%2522%253A%2522cl9zkf3e9000alqiphi669wk8%2522%252C%2522openFiles%2522%253A%255B%2522%252FREADME.md%2522%252C%2522%252Fsrc%252FApp.tsx%2522%252C%2522%252Fpackage.json%2522%252C%2522%252Fnode_modules%252F%2540tanstack%252Freact-router%252Fbuild%252Ftypes%252Findex.d.ts%2522%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522spaces%2522%253A%257B%2522clb9kq7em000u2e68b4cw2ugc%2522%253A%257B%2522key%2522%253A%2522clb9kq7em000u2e68b4cw2ugc%2522%252C%2522name%2522%253A%2522Default%2520Space%2522%252C%2522devtools%2522%253A%255B%257B%2522type%2522%253A%2522PREVIEW%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522key%2522%253A%2522clb9kq7em000v2e68gobobjm8%2522%252C%2522isMinimized%2522%253Afalse%252C%2522path%2522%253A%2522%252Fblog%2522%257D%255D%257D%257D%252C%2522currentSpace%2522%253A%2522clb9kq7em000u2e68b4cw2ugc%2522%257D

Steps to Reproduce the Bug or Issue

1. Go to csb
2. See the lazy loading error

• Open browser console and see

Warning
Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.

• See TS error in the IDE

Warning
Type 'Promise<{ default: never; } | (({ initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement: Container, router, }: DevtoolsOptions) => ReactElement<any, string | JSXElementConstructor> | null)>' is not assignable to type 'Promise<{ default: ComponentType; }>'.

Expected behavior

The TanstackRouterDevtools is successfully imported and render on the page

Screenshots or Videos

Platform

• OS: MacOS
• Browser: Firefox
• 108.0b9 (64-bit)

Additional context

No response

[GyanendroKh]

A workaround would be to return an object from then with a default property

const TanStackRouterDevtools =
  process.env.NODE_ENV === 'production'
    ? () => null // Render nothing in production
    : React.lazy(() =>
        // Lazy load in development
        import('@tanstack/react-router-devtools').then(r => ({
          default: r.TanStackRouterDevtools
        }))
      );

Using the above works fine for me