fix(router-generator): normalize virtual physical subtree paths (#7169)

Co-authored-by: schiller-manuel <6340397+schiller-manuel@users.noreply.github.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

Author: schiller-manuel

.changeset/five-badgers-listen.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/router-generator': patch
+---
+
+Fix malformed generated paths when a `physical()` mount points at a subtree rooted by `__virtual.ts`, including nested virtual layouts that mount additional physical routes.

packages/router-generator/src/filesystem/physical/getRouteNodes.ts

@@ -1,6 +1,7 @@
 import path from 'node:path'
 import * as fsp from 'node:fs/promises'
 import {
+  cleanPath,
   determineInitialRoutePath,
   escapeRegExp,
   hasEscapedLeadingUnderscore,
@@ -121,16 +122,21 @@ export async function getRouteNodes(
         )
       allPhysicalDirectories.push(...physicalDirectories)
       virtualRouteNodes.forEach((node) => {
-        const filePath = replaceBackslash(path.join(dir, node.filePath))
-        const routePath = `/${dir}${node.routePath}`
+        const normalizedDir = dir === './' ? '' : dir
+        const filePath = replaceBackslash(
+          path.join(normalizedDir, node.filePath),
+        )
+        const routePath = cleanPath(`/${normalizedDir}${node.routePath}`)
 
         node.variableName = routePathToVariable(
-          `${dir}/${removeExt(node.filePath)}`,
+          cleanPath(`/${normalizedDir}/${removeExt(node.filePath)}`),
         )
         node.routePath = routePath
         // Keep originalRoutePath aligned with routePath for escape detection
         if (node.originalRoutePath) {
-          node.originalRoutePath = `/${dir}${node.originalRoutePath}`
+          node.originalRoutePath = cleanPath(
+            `/${normalizedDir}${node.originalRoutePath}`,
+          )
         }
         node.filePath = filePath
         // Virtual subtree nodes (from __virtual.ts) are embedded in a

packages/router-generator/src/filesystem/virtual/getRouteNodes.ts

@@ -1,5 +1,6 @@
 import path, { join, resolve } from 'node:path'
 import {
+  cleanPath,
   determineInitialRoutePath,
   removeExt,
   removeLeadingSlash,
@@ -164,10 +165,14 @@ export async function getRouteNodesRecursive(
           subtreeNode.variableName = routePathToVariable(
             `${node.pathPrefix}/${removeExt(subtreeNode.filePath)}`,
           )
-          subtreeNode.routePath = `${parent?.routePath ?? ''}${node.pathPrefix}${subtreeNode.routePath}`
+          subtreeNode.routePath = cleanPath(
+            `${parent?.routePath ?? ''}${node.pathPrefix}${subtreeNode.routePath}`,
+          )
           // Keep originalRoutePath aligned with routePath for escape detection
           if (subtreeNode.originalRoutePath) {
-            subtreeNode.originalRoutePath = `${parent?.routePath ?? ''}${node.pathPrefix}${subtreeNode.originalRoutePath}`
+            subtreeNode.originalRoutePath = cleanPath(
+              `${parent?.routePath ?? ''}${node.pathPrefix}${subtreeNode.originalRoutePath}`,
+            )
           }
           subtreeNode.filePath = `${node.directory}/${subtreeNode.filePath}`
         })

packages/router-generator/tests/generator/virtual-inside-nested/routeTree.snapshot.ts

@@ -11,8 +11,8 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as FooBarRouteImport } from './routes/foo/bar'
-import { Route as fooBarDetailsRouteImport } from './routes/foo/bar/details'
-import { Route as fooBarHomeRouteImport } from './routes/foo/bar/home'
+import { Route as FooBarDetailsRouteImport } from './routes/foo/bar/details'
+import { Route as FooBarHomeRouteImport } from './routes/foo/bar/home'
 
 const IndexRoute = IndexRouteImport.update({
   id: '/',
@@ -24,12 +24,12 @@ const FooBarRoute = FooBarRouteImport.update({
   path: '/foo/bar',
   getParentRoute: () => rootRouteImport,
 } as any)
-const fooBarDetailsRoute = fooBarDetailsRouteImport.update({
+const FooBarDetailsRoute = FooBarDetailsRouteImport.update({
   id: '/$id',
   path: '/$id',
   getParentRoute: () => FooBarRoute,
 } as any)
-const fooBarHomeRoute = fooBarHomeRouteImport.update({
+const FooBarHomeRoute = FooBarHomeRouteImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => FooBarRoute,
@@ -38,20 +38,20 @@ const fooBarHomeRoute = fooBarHomeRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/foo/bar': typeof FooBarRouteWithChildren
-  '/foo/bar/': typeof fooBarHomeRoute
-  '/foo/bar/$id': typeof fooBarDetailsRoute
+  '/foo/bar/': typeof FooBarHomeRoute
+  '/foo/bar/$id': typeof FooBarDetailsRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
-  '/foo/bar': typeof fooBarHomeRoute
-  '/foo/bar/$id': typeof fooBarDetailsRoute
+  '/foo/bar': typeof FooBarHomeRoute
+  '/foo/bar/$id': typeof FooBarDetailsRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/foo/bar': typeof FooBarRouteWithChildren
-  '/foo/bar/': typeof fooBarHomeRoute
-  '/foo/bar/$id': typeof fooBarDetailsRoute
+  '/foo/bar/': typeof FooBarHomeRoute
+  '/foo/bar/$id': typeof FooBarDetailsRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -86,27 +86,27 @@ declare module '@tanstack/react-router' {
       id: '/foo/bar/$id'
       path: '/$id'
       fullPath: '/foo/bar/$id'
-      preLoaderRoute: typeof fooBarDetailsRouteImport
+      preLoaderRoute: typeof FooBarDetailsRouteImport
       parentRoute: typeof FooBarRoute
     }
     '/foo/bar/': {
       id: '/foo/bar/'
       path: '/'
       fullPath: '/foo/bar/'
-      preLoaderRoute: typeof fooBarHomeRouteImport
+      preLoaderRoute: typeof FooBarHomeRouteImport
       parentRoute: typeof FooBarRoute
     }
   }
 }
 
 interface FooBarRouteChildren {
-  fooBarHomeRoute: typeof fooBarHomeRoute
-  fooBarDetailsRoute: typeof fooBarDetailsRoute
+  FooBarHomeRoute: typeof FooBarHomeRoute
+  FooBarDetailsRoute: typeof FooBarDetailsRoute
 }
 
 const FooBarRouteChildren: FooBarRouteChildren = {
-  fooBarHomeRoute: fooBarHomeRoute,
-  fooBarDetailsRoute: fooBarDetailsRoute,
+  FooBarHomeRoute: FooBarHomeRoute,
+  FooBarDetailsRoute: FooBarDetailsRoute,
 }
 
 const FooBarRouteWithChildren =

packages/router-generator/tests/generator/virtual-inside-with-escaped-underscore/routeTree.snapshot.ts

@@ -10,49 +10,49 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as IndexRouteImport } from './routes/index'
-import { Route as nestedCallbackRouteImport } from './routes/nested/callback'
-import { Route as nestedAuthRouteImport } from './routes/nested/auth'
-import { Route as nestedHomeRouteImport } from './routes/nested/home'
+import { Route as NestedCallbackRouteImport } from './routes/nested/callback'
+import { Route as NestedAuthRouteImport } from './routes/nested/auth'
+import { Route as NestedHomeRouteImport } from './routes/nested/home'
 
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
-const nestedCallbackRoute = nestedCallbackRouteImport.update({
+const NestedCallbackRoute = NestedCallbackRouteImport.update({
   id: '/nested/_callback',
   path: '/nested/_callback',
   getParentRoute: () => rootRouteImport,
 } as any)
-const nestedAuthRoute = nestedAuthRouteImport.update({
+const NestedAuthRoute = NestedAuthRouteImport.update({
   id: '/nested/_auth',
   path: '/nested/_auth',
   getParentRoute: () => rootRouteImport,
 } as any)
-const nestedHomeRoute = nestedHomeRouteImport.update({
+const NestedHomeRoute = NestedHomeRouteImport.update({
   id: '/nested/',
   path: '/nested/',
   getParentRoute: () => rootRouteImport,
 } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
-  '/nested/': typeof nestedHomeRoute
-  '/nested/_auth': typeof nestedAuthRoute
-  '/nested/_callback': typeof nestedCallbackRoute
+  '/nested/': typeof NestedHomeRoute
+  '/nested/_auth': typeof NestedAuthRoute
+  '/nested/_callback': typeof NestedCallbackRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
-  '/nested': typeof nestedHomeRoute
-  '/nested/_auth': typeof nestedAuthRoute
-  '/nested/_callback': typeof nestedCallbackRoute
+  '/nested': typeof NestedHomeRoute
+  '/nested/_auth': typeof NestedAuthRoute
+  '/nested/_callback': typeof NestedCallbackRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
-  '/nested/': typeof nestedHomeRoute
-  '/nested/_auth': typeof nestedAuthRoute
-  '/nested/_callback': typeof nestedCallbackRoute
+  '/nested/': typeof NestedHomeRoute
+  '/nested/_auth': typeof NestedAuthRoute
+  '/nested/_callback': typeof NestedCallbackRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -64,9 +64,9 @@ export interface FileRouteTypes {
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
-  nestedHomeRoute: typeof nestedHomeRoute
-  nestedAuthRoute: typeof nestedAuthRoute
-  nestedCallbackRoute: typeof nestedCallbackRoute
+  NestedHomeRoute: typeof NestedHomeRoute
+  NestedAuthRoute: typeof NestedAuthRoute
+  NestedCallbackRoute: typeof NestedCallbackRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -82,31 +82,31 @@ declare module '@tanstack/react-router' {
       id: '/nested/_callback'
       path: '/nested/_callback'
       fullPath: '/nested/_callback'
-      preLoaderRoute: typeof nestedCallbackRouteImport
+      preLoaderRoute: typeof NestedCallbackRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/nested/_auth': {
       id: '/nested/_auth'
       path: '/nested/_auth'
       fullPath: '/nested/_auth'
-      preLoaderRoute: typeof nestedAuthRouteImport
+      preLoaderRoute: typeof NestedAuthRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/nested/': {
       id: '/nested/'
       path: '/nested'
       fullPath: '/nested/'
-      preLoaderRoute: typeof nestedHomeRouteImport
+      preLoaderRoute: typeof NestedHomeRouteImport
       parentRoute: typeof rootRouteImport
     }
   }
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
-  nestedHomeRoute: nestedHomeRoute,
-  nestedAuthRoute: nestedAuthRoute,
-  nestedCallbackRoute: nestedCallbackRoute,
+  NestedHomeRoute: NestedHomeRoute,
+  NestedAuthRoute: NestedAuthRoute,
+  NestedCallbackRoute: NestedCallbackRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)