Feature request: Make routeTree.gen.ts NodeNext-compatible (and document current Bundler assumption)

[jimmycallin]

routeTree.gen.ts should be generated in a format that works with TypeScript moduleResolution: "NodeNext" / module: "NodeNext" (Node ESM rules). Today it effectively requires moduleResolution: "bundler" to avoid resolution errors, but that requirement isn’t documented anywhere. Figuring out why route loaders weren't automatically inferring types took me quite a while, due to the type errors being very vague about the issue.

I understand why "bundler" is the current default, as TanStack Start is Vite-based. However, generating NodeNext-compatible import specifiers should still work fine for bundler users, because TypeScript’s "bundler" resolution is explicitly less strict than Node’s ESM modes (e.g. it “never requires file extensions on relative paths in imports”).

In NodeNext, TypeScript follows Node’s ESM rules more closely and is stricter about import specifiers (commonly: relative imports needing explicit extensions in ESM contexts). Generated output that relies on bundler-style resolution forces consumers to switch their project to "moduleResolution": "bundler" even if they’re targeting Node ESM.

This is surprising because the generator’s output has an implicit config requirement that isn’t mentioned in docs.

Proposed change

Generate routeTree.gen.ts using NodeNext-friendly ESM import specifiers (or provide a generator option like resolutionMode: "nodenext" | "bundler"). I think it mainly involves avoiding relying on extensionless relative import resolution that breaks under NodeNext.

[schiller-manuel]

so how does the routetree then have to look like? please provide a complete minimal example project and the diff of the route tree file

[devinrhode2]

I had the same thought.

The file is very normal typescript. I'm not sure how it would need to change off hand.

[jimmycallin]

For me, I've gotten it to work by simply adding .js to all my imports in routeTree.gen.ts (up until I start the dev server and it gets regenerated), but not sure if there could be other changes necessary for possible edge cases.

If this is indeed all it takes, this should work in bundler mode as well.

[devinrhode2]

I'll say I have 2 COMPLETELY unrelated cases where it'd be nice to tweak the routeTree.gen.ts file.

1. For Micro-frontends, I'd like to merge multiple rootRouteChildren before creating the final routeTree.
2. Sonar doesn't like the /* eslint-disable */ comment - sonar likes you to disable specific rules.

So that's 3 cases where it might be nice to easily tweak the output. I'd imagine we could add support for a callback to the tanstack plugin.

... Lot of options here... Maybe there's already enough options to support all our use cases
https://www.npmjs.com/package/@tanstack/router-plugin?activeTab=code (see the vite.d.ts, or just cmd click from your vite config)

[devinrhode2]

// If typescript is disabled, make sure the generated route tree is a .js file
  if (config.disableTypes) {
    config.generatedRouteTree = config.generatedRouteTree.replace(
      /\.(ts|tsx)$/,
      '.js',
    )
  }

router/packages/router-generator/src/config.ts

Line 117 in 46fc1e9

if (config.disableTypes) {

[devinrhode2]

Not exactly what you are looking for... I think..