[start/alpha] [Bug] Dev server crashes when moving an existing route file into a folder

[ThimoDEV]

Which project does this relate to?

Start

Describe the bug

When running the alpha tanstack start dev server. I tried to move a route file into a folder. This causes the dev server t ocrash and doesn't make the routeTree.gen.ts to refresh. I need to delete the gen file to fix it.

Your Example Website or App

https://github.com/ThimoDEV/tanstack-start-alpha-bugs

Steps to Reproduce the Bug or Issue

1. Start dev server
2. Move the file hi.tsx into the ./src/routes/test folder
3. Try to rename hi.tsx to index.tsx
4. Notice the error in terminal

Expected behavior

As a user, I expect to move a route file into another folder while the dev server is running. I also would think the routeTree.gen would recover when I fix the route file structure, or have it recovered on chrome hard refresh

Screenshots or Videos

No response

Platform

• OS: Windows 11
• Browser: Chrome
• Version: V137

Additional context

[schiller-manuel]

released in https://github.com/TanStack/router/releases/tag/v1.121.0-alpha.26

can you please check if this is fixed?

[ThimoDEV]

Will do, I can check in ~18 hours

[ThimoDEV]

The issue is not resolved,

I notice that the routeTree file gets corrupted in this way:

import { Route as TestAboutRouteImport } fr./routes/test/aboutest/about' import { ServerRoute as HelloServerRouteImport } from './routes/hello'

the from keyword is broken and the ' is removed

[schiller-manuel]

can not reproduce with https://github.com/TanStack/router/releases/tag/v1.121.0-alpha.27

can you please test again?

[ThimoDEV]

I just tried with v27.

• The routeTree.gen.ts file now always self resotres if I close my devserver and restart again. Thats great!
• Dragging a file or creating a new file inside a folder and creating the folder works too during hmr (only vite errors but thats okay) [EDIT] The issue is only resolved if I have my routeTree.gen.ts file open in a tab. If I do not open it it still gets malformed

To reproduce:

1: Open your routeTree.gen.ts file and pin it 2: Drag a file into a folder or move it out of a folder 3: Now close the routeTree.gen.ts file 4: Move another route file 5: Open up routeTree.gen.ts and see something like below (happens when i move a route file out of a folder):

This routeTree syntax error happens when I move a route file inside a folder during hmr

Another issue left now is that deleting a route file in hmr causes the below error:

To reproduce:

1: in devserver, create a new route file 2: Go to that endpoint (to see it added) 3: Delete the route file (see error pop up

4: If you then add another new file in the routes folder the error is resolved, I think a last refresh of the routeTree.gen.ts is needed on Delete of a route file,

[schiller-manuel]

#4389 fixes the "route deleted but route tree not updated" scenario. about the malforming: did you automatically update imports after moving?

[ThimoDEV]

Sorry for misunderstanding, How do you mean update imports after moving?

[schiller-manuel]

this https://code.visualstudio.com/docs/languages/javascript#_update-imports-on-file-move

[ThimoDEV]

Yes I have it enabled, is that the reason?

[schiller-manuel]

it was for me. seems like vs code edits the file in place somehow and then conflicts with the generator.

[ThimoDEV]

That explains a lot. Although weird that it works properly if I keep the routeTree file open

I assume theres not a way the generator can detect that setting is on and regenerate the imports after vscode did its thing? or overrule it somehow

[schiller-manuel]

i just noticed we have this in docs :) https://tanstack.com/router/latest/docs/framework/react/routing/installation-with-vite#ignoring-the-generated-route-tree-file

[ThimoDEV]

Wow that fixed the file moving issue completely! I added the settings to my settings.json. This should be in every tanstack project :)

However in my example repo the error on file delete still occurs on v1.121.2, Thats the only issue i still reproduce. I removed lockfile, routeTree.gen.ts, node_modules and tried again but still happened. Having a file deleted in a subfolder or directly in routes didn't make a difference

[schiller-manuel]

can you list the detailed steps to reproduce please? and share a complete example repo?

[ThimoDEV]

https://github.com/ThimoDEV/tanstack-start-alpha-bugs

Steps to reproduce:

1: Run bun dev 2: Go to localhost:3000/test 3: Delete test.tsx 4: Press F5 to refresh page while being on localhost:3000/test 4: See the following error:

[schiller-manuel]

I just tried reproducing with v1.121.7 but I wasn't able to, so probably fixed by now. can you please try again?

[ThimoDEV]

I just tried with v1.121.12 but no success yet,

I cleared my lockfile, node_modules, regenerated routeTree.gen.ts, deleted tmpDir. When testing eventually it seemed to work as expected. After I renamed a route and then deleted it the error came back. However I think theres a cache (persisting) issue somewhere. Do you know if i'm still missing something I can refresh/regenerate?

[schiller-manuel]

it might be a windows thing again :( I will try to replicate on macOS

[ThimoDEV]

I just moved my test repo to WSL. This does give errors in the terminal but keeps the devserver running and refreshes.

So with this I would say its most likely a windows (11) issue.

I see the same error happening but after that it just works and refreshes in wsl

Failed to load url /src/routes/test.tsx (resolved id: /home/thimo/Github repos linux/Tests/tanstack-start-alpha-bugs/src/routes/test.tsx) in /home/thimo/Github repos linux/Tests/tanstack-start-alpha-bugs/src/routeTree.gen.ts. Does the file exist? Error: Failed to load url /src/routes/test.tsx (resolved id: /home/thimo/Github repos linux/Tests/tanstack-start-alpha-bugs/src/routes/test.tsx) in /home/thimo/Github repos linux/Tests/tanstack-start-alpha-bugs/src/routeTree.gen.ts. Does the file exist? at loadAndTransform (file:///home/thimo/Github%20repos%20linux/Tests/tanstack-start-alpha-bugs/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:35725:17) at async fetchModule (file:///home/thimo/Github%20repos%20linux/Tests/tanstack-start-alpha-bugs/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:46829:16) at async handleInvoke (file:///home/thimo/Github%20repos%20linux/Tests/tanstack-start-alpha-bugs/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:38973:22) at async EventEmitter.listenerForInvokeHandler (file:///home/thimo/Github%20repos%20linux/Tests/tanstack-start-alpha-bugs/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:39046:19)

[ThimoDEV]

Just tested with version 1.121.41 react-router & react-start. The last issue seems fixed also on windows now. Only an error in the terminal but the devserver keeps running as expected. This is a fantastic developer experience <3