Type Error for routes

Describe the bug

I have working routes when using my app that work perfectly, however when using or , the routes do not exist.

Type '{ children: Element[]; to: "/app"; className: string; }' is missing the following properties
from type 'CheckPathError<RoutesInfo<RootRoute<{}, RouteContext, RouterContext>>, "/app">': Error,
'Valid Route Paths'

Your Example Website or App

xxx

Steps to Reproduce the Bug or Issue

routes.tsx

import { Outlet, RootRoute, Route } from "@tanstack/react-router";
import IndexPage from "@/pages";
export const rootRoute = new RootRoute({
  component: Outlet,
});
const appRoute = new Route({
  path: "/app",
  getParentRoute: () => rootRoute,
});
const appIndexRoute = new Route({
  path: "/",
  component: () => (
    <Layout>
      <IndexPage />
    </Layout>
  ),
  getParentRoute: () => appRoute,
});
rootRoute.addChildren([
  appRoute.addChildren([
    appIndexRoute,
  ]),
]);

router.tsx

import React from "react";
import { ReactRouter, RouterProvider } from "@tanstack/react-router";
import { rootRoute } from "./_routes";
const router = new ReactRouter({
  routeTree: rootRoute,
});
export const Router = () => <RouterProvider router={router} />;
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

<Link to={"/app"}>
  Go to app
</Link>
Type '{ children: Element[]; to: "/app"; className: string; }' is missing the following properties from 
type 'CheckPathError<RoutesInfo<RootRoute<{}, RouteContext, RouterContext>>, "/app">': Error, 'Valid Route Paths'

Expected behavior

As a user I expected there not to be an issue with typing.

Screenshots or Videos

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[balAdamT]

I notice this exact same behavior when trying to create nested routes.

const homeRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "/",
  component: HomeComponent,
});

const moduleRoute= new Route({
  getParentRoute: () => rootRoute,
  path: "module",
  component: ModuleComponent,
});

const subRoute = new Route({
  getParentRoute: () => moduleRoute,
  path: "sub",
  component: SubComponent,
});

const routeTree = rootRoute.addChildren([
  homeRoute,
  moduleRoute
]);

moduleRoute.addChildren([subRoute]);

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

This works but creates the same type error as in the top comment when trying to create a Link component pointing to "/module/sub".

Curiously, if I add subRoute directly to rootRoute then the typings are correctly generated for "/module/sub" but understandably the router throws an error when trying to initializing the routes:

const homeRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "/",
  component: HomeComponent,
});

const moduleRoute= new Route({
  getParentRoute: () => rootRoute,
  path: "module",
  component: ModuleComponent,
});

const subRoute = new Route({
  getParentRoute: () => moduleRoute,
  path: "sub",
  component: SubComponent,
});

const routeTree = rootRoute.addChildren([
  homeRoute,
  moduleRoute,
  subRoute,
]);

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

[bsell93]

version: 0.0.1-beta.83

I'm getting the same type error as well when using useNavigate

Argument of type '{ to: "/my-route/info"; }' is not assignable to parameter of type 'MakeLinkOptions<"/", "/my-route/info">'.
  Type '{ to: "/my-route/info"; }' is missing the following properties from type 'CheckPathError<RoutesInfo<Route<any, "/", "/", string, "__root__", {}, {}, {}, {}, RouterContext, RouterContext, RouteContext, RouterContext & RouteContext, RouterContext, (Route<...> | Route<...>)[], DefaultRoutesInfo>>, "/my-route/info">': Error, 'Valid Route Paths'ts(2345)

usage:

navigate({
    to: MyRoute.id,
});

To work around this type-error for now I'm just ignoring it for now until it's fixed or an alternative is found:

navigate({
    to: MyRoute.id,
} as unknown as MakeLinkOptions);

Seems like this could be related to this issue (#414 (comment)), so maybe there is a way to modify the type/interface override so that it includes nested routes?

This issue also seems related to the issue I'm having: #536

[bsell93]

@ulnk try using the route id directly instead of a string and see if that works
to={appIndexRoute.id}

[dwamianm]

Adding the following fixed the issue for me

declare module '@tanstack/router' {
  interface RegisterRouter {
    router: typeof router;
  }
}

I am not sure why using RegisterRouter vs Register as per the examples in the documentation helps, but the error is now gone.

[bsell93]

@dwamianm I'm not seeing a type of RegisterRouter in tanstack/router code; I did find RegisteredRoute. I changed it to what you suggested as well as RegisteredRoute and it got rid of the typing error, but now I have not typing declaration for any router code. From what I'm seeing it just changes it to any, which of course will allow you to do anything without errors.

[marklai1998]

give it a little push

[tannerlinsley]

The examples are up to date with the best practices for type-safety and this the proper way to register your router:

// Register your router for maximum type safety
declare module '@tanstack/router' {
  interface Register {
    router: typeof router
  }
}

[bzbetty]

I am not sure why using RegisterRouter vs Register as per the examples in the documentation helps, but the error is now gone.

pretty sure it's because it falls back to making the router any typed so you get no typing at all at that stage.

for me the issue was I needed to update both @tanstack/react-router and @tanstack/router-cli to the latest beta (and make sure their versions lined up).