Code splitting with Virtual File Routes
Does code splitting work with Virtual File Routes? I've tried setting autoCodeSplitting and renaming the route to use a .lazy.tsx suffix. When I try to use createLazyFileRoute the vite plugin renames it to createFileRoute.
14 Replies
equal-aqua•5mo ago
don't use manual lazy routes
enable autoCodeSplitting instead
other-emeraldOP•5mo ago
Thanks for responding. My mistake on this. I didn't remove the export default statements in my route files. That was preventing the code splitting from working.
foreign-sapphire•2mo ago
Hello,
I'd like to build a route tree from a combination of the contents of src/routes and a distant, nested routes directory. Claude and I spent the afternoon trying to get virtual file routing to accomplish that without success.
The virtual file routes documentation doesn't show an example of building a route tree which includes routes from a distant, nested directory. However I saw a recent PR which suggested that's now possible.
Claude composed a question to post here, but I think he missed the point along with hallucinating(?) unlikely virtual-file-routes issues within a TanStack Start environment.
Anyway, here's Claude's upbeat question. Maybe its more cogent than I imagine: Hi everyone! 👋 We're working on a TanStack Start project and trying to use virtual file routes to organize our components outside the standard src/routes/ directory structure. We've successfully used virtual routes in regular TanStack Router projects (that is false, an LLM hallucination?), but we're running into some challenges with TanStack Start. What we've tried: - Installed @tanstack/virtual-file-routes - Created src/routes/__virtual.ts with route configuration - Attempted to add virtualRouteConfig to the TanStack Start plugin (got TypeScript errors) Current behavior: - The route tree generator still references physical file paths - Virtual routes configuration doesn't seem to be processed - Had to create bridge/stub route files in the src/routes dir as a workaround Questions: 1. Does TanStack Start fully support virtual file routes yet? 2. If so, what's the correct configuration approach? 3. Are there any known limitations or alternative patterns for organizing routes outside the standard structure? We're particularly interested in keeping auth-related components in a separate directory while maintaining clean routing. Any guidance or examples would be greatly appreciated!
Anyway, here's Claude's upbeat question. Maybe its more cogent than I imagine: Hi everyone! 👋 We're working on a TanStack Start project and trying to use virtual file routes to organize our components outside the standard src/routes/ directory structure. We've successfully used virtual routes in regular TanStack Router projects (that is false, an LLM hallucination?), but we're running into some challenges with TanStack Start. What we've tried: - Installed @tanstack/virtual-file-routes - Created src/routes/__virtual.ts with route configuration - Attempted to add virtualRouteConfig to the TanStack Start plugin (got TypeScript errors) Current behavior: - The route tree generator still references physical file paths - Virtual routes configuration doesn't seem to be processed - Had to create bridge/stub route files in the src/routes dir as a workaround Questions: 1. Does TanStack Start fully support virtual file routes yet? 2. If so, what's the correct configuration approach? 3. Are there any known limitations or alternative patterns for organizing routes outside the standard structure? We're particularly interested in keeping auth-related components in a separate directory while maintaining clean routing. Any guidance or examples would be greatly appreciated!
equal-aqua•2mo ago
please provide a complete example project by forking one of the existing router examples on stackblitz.
foreign-sapphire•2mo ago
Provide an example? I'd love to but I haven't been able to discern how __virtual.ts is meant to refer to distant routes, i.e. routes not in the routes dir. An example is what I'm asking for.
None of the stackblitz examples does that. All existing __virtual.ts examples just reference routes in the routes dir. Has anyone referenced routes outside of the routes dir? Is it even possible?
equal-aqua•2mo ago
why
__virtual.tsx?equal-aqua•2mo ago
why not just a routes.ts like shown here?
https://tanstack.com/router/latest/docs/framework/react/routing/virtual-file-routes#configuration-via-the-tanstackrouter-plugin
Virtual File Routes | TanStack Router React Docs
We'd like to thank the Remix team for . We've taken inspiration from their work and adapted it to work with TanStack Router's existing file-based route-tree generation. Virtual file routes are a power...
equal-aqua•2mo ago
reference all the files you want in there
don't have to be in routes dir
foreign-sapphire•2mo ago
Thanks so much for your clarification and guidance. I think I see how it works -- I can reference any file in the project like this:
That seems perfect. I'll try it out later today.
Oh, to answer your question, I pursued
__virtual.tsx because I thought it was the only way to combine file-based routing with programatic/virtual routing. The examples seem compelling. I'd like any user of my auth starter to have the option of file-based routing.foreign-sapphire•2mo ago
Hi Manuel,
I had a stab at using routes.ts but couldn't get a route outside the routes directory to work. Per your suggestion, I forked a TanStack Router Virtual File Routing example on Stackblitz and added a rogue route: my-custom-page.tsx. I can't get it to work: routetree.gen ends up with a mysterious error.
Here's the forked example:
https://stackblitz.com/edit/github-93ulbqhx
By the way, I used Stackblitz's "Bolt" AI to help create my-custom-page etc. It seems pretty good - a bit more interactive than Cursor or Trae. I burned through my daily token limit in about 5 minutes.
Anyway, I hope this helps you understand the issue we're facing.
Steve Steinitz
StackBlitz
Router Basic Virtual File Based Example - StackBlitz
Run official live example code for Router Basic Virtual File Based, created by Tan Stack on StackBlitz
equal-aqua•2mo ago
you just had some errors in the custom route
equal-aqua•2mo ago
see https://stackblitz.com/edit/github-93ulbqhx-zmqg2gbk?file=src%2Fcustom-routes%2Fmy-custom-page.tsx
Manuel Schiller
StackBlitz
Router Basic Virtual File Based Example (duplicated) - StackBlitz
Run official live example code for Router Basic Virtual File Based, created by Tan Stack on StackBlitz
foreign-sapphire•2mo ago
This is great news. I'll keep this project as a working example of "external" routes. Thank you for having a look and for fixing the issue.
foreign-sapphire•2mo ago
Here's a minimal reproduction of an issue with virtual routing in TanStack Start.
stackblitz github Note a runtime error prevents it from running on stackblitz. It also prevented stackblitz's Bolt AI from helping solve it. I realize that's not an ideal outcome but maybe its useful anyway. It runs successfully locally with pnpm install; pnpm dev Claude's summary: Demonstrates three key issues: 1. Virtual routes not being included in route tree generation 2. Infinite route tree regeneration causing performance issues 3. TypeScript errors due to missing createFileRoute declarations
stackblitz github Note a runtime error prevents it from running on stackblitz. It also prevented stackblitz's Bolt AI from helping solve it. I realize that's not an ideal outcome but maybe its useful anyway. It runs successfully locally with pnpm install; pnpm dev Claude's summary: Demonstrates three key issues: 1. Virtual routes not being included in route tree generation 2. Infinite route tree regeneration causing performance issues 3. TypeScript errors due to missing createFileRoute declarations
Steve Steinitz
StackBlitz
TanStack Start/Router Virtual File Route Issue - StackBlitz
Demonstrates three virtual file routing issues:
Virtual routes not being included in route tree generation
Infinite route tree regeneration causing performance issues
TypeScript errors due to missing createFileRoute declarations
GitHub
GitHub - steinitz/TanStackStartBetterAuth at minimal-external-route...
Demonstrates how to integrate BetterAuth with TanStack Start - GitHub - steinitz/TanStackStartBetterAuth at minimal-external-route-issue