xenial-black

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

fascinating-indigo•4mo ago

needs to be exported probably?

export interface MyRouterContext  ...

export interface MyRouterContext  ...

xenial-blackOP•4mo ago

yeee that did it, thank you king 👑

Gaming

Programming

createRootRouterWithContext Interface cannot be Named Type Issue

Did you find this page helpful?