Vite Router Plugin generates routeTree.gen.ts with imports using .tsx instead of .js for esm module

[prolific]

Which project does this relate to?

Router

Describe the bug

Using @tanstack/router-plugin/vite inside vite config to generate routeTree automatically.

Plugin Config:

TanStackRouterVite({
    semicolons: true,
    quoteStyle: "double",
    addExtensions: true,
    autoCodeSplitting: true
})

Now the problem is that the generated routeTree has the following imports:

import { Route as rootRoute } from "./routes/__root.tsx";
import { Route as IdImport } from "./routes/$id.tsx";
import { Route as IndexImport } from "./routes/index.tsx";

but inside the esm module the imports should ideally be using the .js extension. Expected:

import { Route as rootRoute } from "./routes/__root.js";
import { Route as IdImport } from "./routes/$id.js";
import { Route as IndexImport } from "./routes/index.js";

Though vite builds the code just fine but I have some server side logic as well where vite is not involved but since the routeTree is being generated using vite and it contains .tsx so it is causing issues with my build because it expect .js imports in esm which is default behaviour.

We can probably have another property inside the plugin which allows passing the extension or maybe something similar? Or maybe just always use .js in case of esm?

Your Example Website or App

No link

Steps to Reproduce the Bug or Issue

Not Required.

Expected behavior

Already shared.

Screenshots or Videos

No response

Platform

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

Additional context

No response

[schiller-manuel]

We can probably have another property inside the plugin which allows passing the extension or maybe something similar?

sounds reasonable. do you want to create a PR for this?

[itsjoeoui]

Hey guys! Correct me if I am wrong, but I believe this option already exists:

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

Line 100 in d5d65a2

if (config.disableTypes) {

  // 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',
    )
  }

Can you try specifying the disableTypes option?

[itsjoeoui]

I am happy to add a new config type to allow specifying extension if that is still needed

[prolific]

@schiller-manuel Thanks for the approval.

@itsjoeoui Yes, it is still needed.

disableTypes is doing something else and is not really manipulating the imports. I did go through the code and even tried it but there is a separate function which handles the imports and even removes the extension when addExtensions is disabled.

We can probably extend the existing property addExtensions to support both boolean and string. In case of boolean it does what it is already doing. In case of string, it uses the specified extension for all imports in routeTree which in case of esm is .js
Extending the type will also be backward compatible.

Such that the final config can be like:

TanStackRouterVite({
    semicolons: true,
    quoteStyle: "double",
    addExtensions: "js",
    autoCodeSplitting: true
})

Currently, I am occupied with something else so if @itsjoeoui doesn't get the time to do it then I might do it after a week or so.