Skip to content

Route files replaced with "Hello /route" boilerplate  #2151

@timoxley

Description

@timoxley

Using vite with @tanstack/router-plugin/vite.
Route files with real content are getting clobbered with boilerplate. i.e.

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/myroute')({
  component: () => <div>Hello /myroute!</div>
})

This has popped up a number of times, but doesn't happen consistently. Normally I just revert the file in my IDE.

But this time, at some point between testing some changes and committing the file it did the clobbering and I managed to lose all the changes and actually committed the boilerplate to source control. (yes i should have checked the diff)

Only just noticed a day later when I tried to demo the new route so I look like a doofus and the original content is not recoverable. 😿😿😿

Platform

  • OS: Windows
  • Browser: Chrome
  • IDE: Webstorm
  • Version:
    "@tanstack/react-router": "^1.48.1",
    "@tanstack/router-cli": "^1.47.0",
    "@tanstack/router-devtools": "^1.48.1",
    "@tanstack/router-plugin": "^1.47.0",

I haven't tested with latest version but I did only update a few days ago.

My guess as to what's happening

Maybe git or the ide does something funny with the file which triggers the plugin into thinking the file is empty (and it might have been, briefly) and async operations between that tool and the route boilerplater get a bit tangled.

// on file changed...
if (await isFileEmpty()) { // it's empty (at this point)
   // but file becomes no longer empty between these two operations
	await writeBoilerplate()
}
sequenceDiagram
   
    participant G as Git (or IDE)
    participant F as File
    participant T as Tan

    G ->> F: "Truncate File"
    activate G
    F -->> T: "Report File Changed!"
    activate T
    
    T ->> F: "Is File Empty?"
    Note right of T: if (await IsFileEmpty()) {<br />...  
    F -->> T: "File is Empty"
    Note right of G: Meanwhile...
    G ->> F: "Write New Content"
    deactivate G
    Note right of F: File is no longer empty...
  
    Note right of T: await WriteBoilerplate()
    T ->> F: "Write Boilerplate"
    deactivate T
    Note right of F: Clobbered New Content!
Loading

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions