Code-based, path types lost when router tree scales

[barandurakk]

Hi, I'm trying to implement code-based tanstack router to a medium/big scale project. It should be code-based for various reasons.

I realized that if routeTree is big enough all union types of the paths are transforming to any so ts autocomplete is gone.

Do i missing something ?

React version: 18.2.0
Typescript version: 5.3.2
Tanstack router version : 1.20.1

When my routeTree is like below, typings works correctly

//routeTree.ts
const routeTree = rootRoute.addChildren([
  authRoute.addChildren([
    preferencesRoute.addChildren([
      rootLayoutRoute.addChildren([
        indexRoute,
        instancesRoute,
        instanceLayoutRoute.addChildren([
          instanceRoute.addChildren([
            instanceIndexRoute,
            runsRoute,
            outputsRoute,
            inputsRoute,
            environmentsRoute,
          ]),
        ]),
        adminSettingsLayoutRoute.addChildren([
          adminSettingsRoute.addChildren([
            adminSettingsIndexRoute,
            auditRoute,
            groupsRoute,
            licenseRoute,
            organizationsRoute,
            tagsRoute,
            // usersRoute,
            // apiIntegrationInfoRoute,
            // labelsRoute,
            // notificationsRoute,
          ]),
        ]),
      ]),
    ]),
  ]),
]);

export default routeTree;

Type completion works as shown below:

But if i try to add one more route as a child of adminSettingsRoute, path type becomes any;

//routeTree.ts
const routeTree = rootRoute.addChildren([
  authRoute.addChildren([
    preferencesRoute.addChildren([
      rootLayoutRoute.addChildren([
        indexRoute,
        instancesRoute,
        instanceLayoutRoute.addChildren([
          instanceRoute.addChildren([
            instanceIndexRoute,
            runsRoute,
            outputsRoute,
            inputsRoute,
            environmentsRoute,
          ]),
        ]),
        adminSettingsLayoutRoute.addChildren([
          adminSettingsRoute.addChildren([
            adminSettingsIndexRoute,
            auditRoute,
            groupsRoute,
            licenseRoute,
            organizationsRoute,
            tagsRoute,
            usersRoute, //Newly added
            // apiIntegrationInfoRoute,
            // labelsRoute,
            // notificationsRoute,
          ]),
        ]),
      ]),
    ]),
  ]),
]);

export default routeTree;

So, my router.ts :

import { createRouter } from "@tanstack/react-router";

import { queryClient } from "@api/index";
import routeTree from "./routeTree";

const router = createRouter({
  routeTree,
  defaultPreload: false,
  // Since we're using React Query, we don't want loader calls to ever be stale
  // This will ensure that the loader is always called when the route is preloaded or visited
  defaultPreloadStaleTime: 0,
  context: {
    queryClient,
  },
  defaultPendingMs: 100,
  //TODO: Loading handler
  defaultPendingComponent: () => <div>Loading...</div>,
  //TODO: Error handling
  defaultErrorComponent: ({ error }) => <div>Error: {error.message}</div>,
});

declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
  interface StaticDataRouteOption {
    hasCrumb?: boolean;
  }
}

export default router;

My file that includes root router setup;

const rootRoute = createRootRouteWithContext<{
  queryClient: QueryClient;
}>()({
  component: () => (
    <>
      <Outlet />
      <Suspense>
        <TanStackRouterDevtools />
      </Suspense>
    </>
  ),
});

export const authRoute = createRoute({
  getParentRoute: () => rootRoute,
  id: "auth",
  component: () => <AuthService />,
});

export const preferencesRoute = createRoute({
  getParentRoute: () => authRoute,
  id: "preferences",
  component: () => <PreferencesService />,
});

export const rootLayoutRoute = createRoute({
  getParentRoute: () => preferencesRoute,
  component: () => <RootLayout />,
  id: "root-layout",
});

export const indexRoute = createRoute({
  getParentRoute: () => rootLayoutRoute,
  path: "/",
  beforeLoad: () => {
    throw redirect({ to: instancesRoute.to });
  },
});

export default rootRoute;

Also at the same time I started to get
Type instantiation is excessively deep and possibly infinite
Error in various places like useMatches() or getRouteApi()

Thanks for help!

[barandurakk]

Note that:
When i try to add a Route same level as rootLayoutRoute its working correctly, but types breaks when new routes are nested at any way.

I also tried to separate all routes to their own file and only use default export. Its still same.

[barandurakk]

Im getting to conclusion of that, if you start routeTree with more than 2 level of nested Pathless Routes it breaks the types at some point.
I just deleted 'preferencesRoute' from the top and try to add more sibling and children routes to the tree.

Like:

const routeTree = RootRoute.addChildren([
  AuthRoute.addChildren([
    RootLayoutRoute.addChildren([
      IndexRoute,
      InstancesRoute,
      InstanceLayoutRoute.addChildren([
        InstanceRoute.addChildren([
          InstanceIndexRoute,
          RunsRoute,
          OutputsRoute,
          InputsRoute,
          EnvironmentsRoute,
        ]),
      ]),
      AdminSettingsLayoutRoute.addChildren([
        AdminSettingsRoute.addChildren([
              //Can add all of the children now
          AdminSettingsIndexRoute,
          AuditRoute,
          GroupsRoute,
          LicenseRoute,
          OrganizationsRoute,
          TagsRoute,
          ApiIntegrationInfoRoute,
          LabelsRoute,
          NotificationsRoute,
          //Newly added
          UsersRoute.addChildren([
            UsersChildLayoutRoute.addChildren([UsersChildRoute]),
          ]),
        ]),
      ]),
    ]),
  ]),
]);

Types seems to be working.

Is this is a bug ? Or some typescript limit thing when inferring this much? or probably both ?

[schiller-manuel]

can you please provide a minimal complete example?