Type errors in generated src/router.tsx (with TanStack Start & Query)

[icflorescu]

Which project does this relate to?

Create Tanstack App

Describe the bug

The generated src/router.tsx contains two type errors:

The first one says:

Argument of type 'Router<Route<any, "/", "/", string, "__root__", undefined, {}, {}, AnyContext, AnyContext, {}, undefined, RootRouteChildren, FileRouteTypes>, TrailingSlashOption, boolean, RouterHistory, Record<...>>' is not assignable to parameter of type 'never'.ts(2345)

It looks like createTanstackRouter cannot properly infer types from the generated routeTree, not even after starting the app in dev or production mode, and I'm not sure why this happens.

The second one comes from here:

create-tsrouter-app/templates/react/add-on/start/assets/src/router.tsx.ejs

Line 64 in a3e575f

router: typeof router

...where we should have router: ReturnType<typeof createRouter>, if the "tanstack-query" add-on is enabled.
I can come up with a PR to fix it, but there's also this and I don't think they should be addressed in isolation.

I'm yet unfamiliar with the codebase, but it looks to me that if somebody selects both "sentry" and "tanstack-query", we end up with two router instances, aren't we?...

Your Example Website or App

none provided

Steps to Reproduce the Bug or Issue

1. run pnpm create tsrouter-app@latest --add-ons, make sure to select TanStack Start & Query
2. start the application in dev mode
3. inspect src/router.tsx in VSCode

Expected behavior

No type errors.

Screenshots or Videos

No response

Platform

Irrelevant.

Additional context

No response

[jherr]

We are waiting on some infra questions to be resolved before the Start + Sentry configuration works well.

[icflorescu]

It would be great if Sentry.tanstackRouterBrowserTracingIntegration() could also accept a function :-)

[jherr]

I'll pass that on!

[nirtamir2]

I found the solution:

 const queryClient = new QueryClient({
    defaultOptions: {
      dehydrate: { serializeData: superjson.serialize },
      hydrate: { deserializeData: superjson.deserialize },
    },
  });

  const trpcClient = createTRPCClient<TRPCRouter>({
    links: [
      httpBatchStreamLink({
        transformer: superjson,
        url: getUrl(),
      }),
    ],
  });

  const serverHelpers = createTRPCOptionsProxy({
    client: trpcClient,
    queryClient,
  });

  const router = createTanStackRouter({
    context: { queryClient, trpc: serverHelpers },

You can look at the example of trpc https://github.com/trpc/trpc/tree/045fe47ec3c0fa39141e9048c38902fae41fc5ba/examples/tanstack-start/app