T
TanStack•2y ago
yelping-magenta

Typescript issues with file based routing

import { createRouter, ErrorComponent } from '@tanstack/react-router';
import { routeTree } from './routeTree.gen';
import { queryClient } from '@/api-hooks/queryClient';
import { Spinner } from '@/components/common/Spinner';

const router = createRouter({
  routeTree,
  defaultPendingComponent: () => (
      <div className="p-2 text-2xl">
        <Spinner />
      </div>
  ),
  defaultErrorComponent: ({ error }) => <ErrorComponent error={error} />,
  context: {
    auth: undefined!,
    queryClient,
  },
  defaultPreload: 'intent',
  defaultPreloadStaleTime: 0,
});

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

export { router };
import { createRouter, ErrorComponent } from '@tanstack/react-router';
import { routeTree } from './routeTree.gen';
import { queryClient } from '@/api-hooks/queryClient';
import { Spinner } from '@/components/common/Spinner';

const router = createRouter({
  routeTree,
  defaultPendingComponent: () => (
      <div className="p-2 text-2xl">
        <Spinner />
      </div>
  ),
  defaultErrorComponent: ({ error }) => <ErrorComponent error={error} />,
  context: {
    auth: undefined!,
    queryClient,
  },
  defaultPreload: 'intent',
  defaultPreloadStaleTime: 0,
});

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

export { router };
any idea why router: typeof router would throw 
TS2717: Subsequent property declarations must have the same type. Property router must be of type
Router<Route<any, "/", "/", string, "__root__", RootSearchSchema, RootSearchSchema, RootSearchSchema, RootSearchSchema, ... 11 more ..., any>, Record<...>, Record<...>>
, but here has type
Router<Route<any, "/", "/", string, "__root__", RootSearchSchema, RootSearchSchema, RootSearchSchema, RootSearchSchema, ... 11 more ..., any>, Record<...>, Record<...>>
router.tsx(11, 5): router was also declared here.
TS2717: Subsequent property declarations must have the same type. Property router must be of type
Router<Route<any, "/", "/", string, "__root__", RootSearchSchema, RootSearchSchema, RootSearchSchema, RootSearchSchema, ... 11 more ..., any>, Record<...>, Record<...>>
, but here has type
Router<Route<any, "/", "/", string, "__root__", RootSearchSchema, RootSearchSchema, RootSearchSchema, RootSearchSchema, ... 11 more ..., any>, Record<...>, Record<...>>
router.tsx(11, 5): router was also declared here.
3 Replies
correct-apricot
correct-apricot•2y ago
Will need to see a minimal reproduction of this. From the error message, it seems like the router is having a collision with something, elsewhere in the repository. But its really hard to tell without seeing a minimal reproduction of whats going on.
yelping-magenta
yelping-magentaOP•2y ago
I switched over to file based routing and it went away... been noticing more issues outside of file based routing
correct-apricot
correct-apricot•2y ago
It's why we push file-based routing. They both use the same primitives, but people always mess up the configuration when doing the code-based approach.

Did you find this page helpful?