T
TanStack•4w ago
wise-white

createRootRouterWithContext Interface cannot be Named Type Issue

Heylo, I've tried implementing createRootRouterWithContext with an interface, but I run into the following issue when defining my router:
Exported variable 'router' has or is using name 'MyRouterContext' from external module "../routes/__root" but cannot be named. (ts 4023)
Exported variable 'router' has or is using name 'MyRouterContext' from external module "../routes/__root" but cannot be named. (ts 4023)
My code is as follows __root.tsx
interface MyRouterContext {
isAuthed: boolean
}

export const Route = createRootRouteWithContext<MyRouterContext>()({
component: Root,
})
interface MyRouterContext {
isAuthed: boolean
}

export const Route = createRootRouteWithContext<MyRouterContext>()({
component: Root,
})
main.tsx
const router = createRouter({
routeTree,
context: {
isAuthed: false,
},
defaultPreload: 'intent',
scrollRestoration: true,
defaultStructuralSharing: true,
defaultPreloadStaleTime: 0,
defaultNotFoundComponent: NotFoundPage,
})

declare module '@tanstack/react-router' {
interface Register {
router: typeof router
}
}
const router = createRouter({
routeTree,
context: {
isAuthed: false,
},
defaultPreload: 'intent',
scrollRestoration: true,
defaultStructuralSharing: true,
defaultPreloadStaleTime: 0,
defaultNotFoundComponent: NotFoundPage,
})

declare module '@tanstack/react-router' {
interface Register {
router: typeof router
}
}
I found that I don't get any type issue if I define createRootRouteWithContext as follows
export const Route = createRootRouteWithContext<{ isAuthed: boolean }>()({
component: Root,
})
export const Route = createRootRouteWithContext<{ isAuthed: boolean }>()({
component: Root,
})
Would appreciate any input here
2 Replies
foreign-sapphire
foreign-sapphire•4w ago
needs to be exported probably?
export interface MyRouterContext ...
export interface MyRouterContext ...
wise-white
wise-whiteOP•4w ago
yeee that did it, thank you king 👑

Did you find this page helpful?