Suspected bug when using virtual routes w/ nested __virtual.ts

[tpavlu]

Which project does this relate to?

Router

Describe the bug

I am attempting to do a bit of a specific setup with my routes and I am getting some unexpected behavior.
The high level approach is to have a top level virtual route configuration like this

const routingRoot = path.resolve(__dirname, "./src/routes/");
const virtualRoutes = rootRoute("__root.tsx", [
  index('index.tsx'),
  physical("/s1", "../sub_section/routes/"),
  physical("/s2", "../another_section/routes/"),
]);

Those sub sections should be able to do a __virtual.ts file if they desire and federate their routes to sub directories as well

// Folder Hierarchy
// src/sub_section/routes/__virtual.ts
// src/sub_section/foo/routes/index.ts
// example src/sub_section/routes/__virtual.ts 
import {
  defineVirtualSubtreeConfig,
  index,
  layout,
  physical,
} from "@tanstack/virtual-file-routes";

export default defineVirtualSubtreeConfig([
  layout("./_layout.tsx", [
    physical("/foo", "../foo/routes/"),
  ]),
]);

The generator wants to generate these routes '/s1/.//_layout/foo/' instead of what I expected '/s1//_layout/foo/'
Not sure if this is expected but it results in the route getting not found in the browser.

Your Example Website or App

https://codesandbox.io/p/devbox/rjgqk4?migrateFrom=2jly97

Steps to Reproduce the Bug or Issue

• Open the code sandbox
• Navigating to S1 with the link gets not found
• Navigating to S2 with the link works correctly (since it uses file base routing not __virtual.ts)

Expected behavior

• S1 should resolve as well to the foo/routes/index.tsx

Screenshots or Videos

n/a

Platform

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

Additional context

Benefit / Why do this

It allows splitting routes out by logical sections of your code and having shared layouts for those logical sections.

Debugging / Deep dive

The ./ in the route being added comes from here which then gets added to all the virtual paths here. I am not sure if this is desired to indicate there is a virtual jump there, but the routes don't correctly resolve anymore in the browser due to this.

Other Options / Work around?

Perhaps there is a better or more canonically correct way to accomplish something like this that I am unaware of?
Another approach I tried that did not work is being able to define a __virtual.ts at the root. This did not work either but also seems like it would be beneficial to support for something like this.

[schiller-manuel]

being able to define a __virtual.ts at the root.

not sure what you mean by this, but isn't this covered via a routes.ts file like this? https://github.com/TanStack/router/blob/main/examples/react/basic-virtual-file-based/routes.ts

[tpavlu]

being able to define a __virtual.ts at the root.

not sure what you mean by this, but isn't this covered via a routes.ts file like this? https://github.com/TanStack/router/blob/main/examples/react/basic-virtual-file-based/routes.ts

Yea this accomplishes the same thing but is a bit less ideal because it has to be enumerated in the plugin definition.

Being able to have something like

src/routes/
  __root.tsx
  __virtual.ts
  _layout.ts

This would allow things to be have more like the default file based router but the virtual definitions are effectively an extension.

All of this being said these don't solve the root issue I am facing above.