rare-sapphire

Route files keep resetting

Hi Guys, We've recently started using Tanstack Router in our new project, however there is this really annoying thing that keeps happening. Sometimes when renaming a file, the contents of the file get reset to the default route file template. This is how we define our pages:

import {createFileRoute} from '@tanstack/react-router'
import {PageHeader} from "@/components/PageHeader.tsx";
import {useSuspenseQuery} from "@tanstack/react-query";
import {Fab, List, MenuItem, Paper} from "@mui/material";
import {getProjects} from "@/api/queryOptions.ts";
import {HeroLink} from "@/components/HeroLink.tsx";
import {FilterList} from "@mui/icons-material";
import {useAppLayout} from "@/hooks/useAppLayout.tsx";

export const Route = createFileRoute('/_authenticated/projects')({
    component: Projects
})

function Projects() {
    const {data: projects} = useSuspenseQuery(getProjects());

    const {bottomNavigationHeight} = useAppLayout();

    return (
        <>
            <PageHeader title="Projects" />

            <Paper>
                <List>
                    {projects.map(p => (<MenuItem key={p.id} component={HeroLink} to={'/projects/$projectId'} params={{projectId: p.id}}>{p.projectName}</MenuItem>))}
                </List>
            </Paper>

            <Fab
                sx={{
                    position: 'fixed',
                    bottom: bottomNavigationHeight + 16,
                    right: 16
                }} color="primary"
            >
                <FilterList />
            </Fab>
        </>
    )

}

import {createFileRoute} from '@tanstack/react-router'
import {PageHeader} from "@/components/PageHeader.tsx";
import {useSuspenseQuery} from "@tanstack/react-query";
import {Fab, List, MenuItem, Paper} from "@mui/material";
import {getProjects} from "@/api/queryOptions.ts";
import {HeroLink} from "@/components/HeroLink.tsx";
import {FilterList} from "@mui/icons-material";
import {useAppLayout} from "@/hooks/useAppLayout.tsx";

export const Route = createFileRoute('/_authenticated/projects')({
    component: Projects
})

function Projects() {
    const {data: projects} = useSuspenseQuery(getProjects());

    const {bottomNavigationHeight} = useAppLayout();

    return (
        <>
            <PageHeader title="Projects" />

            <Paper>
                <List>
                    {projects.map(p => (<MenuItem key={p.id} component={HeroLink} to={'/projects/$projectId'} params={{projectId: p.id}}>{p.projectName}</MenuItem>))}
                </List>
            </Paper>

            <Fab
                sx={{
                    position: 'fixed',
                    bottom: bottomNavigationHeight + 16,
                    right: 16
                }} color="primary"
            >
                <FilterList />
            </Fab>
        </>
    )

}

Our development environment: IDE: Webstorm 2024.1.4 Node version: 20.11.0 React/TS + Vite SWC Latest version of Tanstack router Any help would be greatly appreciated.

6 Replies

extended-salmon•15mo ago

Can you create an issue for this on github? I can probably fix this, but it'll likely take some time, since it'd probably involve some AST parsing and making changes in place, probably babel or jscodeshift would need to be used here. Also you may want to use the @vitejs/plugin-react vite plugin instead of the SWC one, since we've done no validation on SWC and don't really have anything planned explicitly for it.

rare-sapphireOP•15mo ago

Let me try and reproduce it properly and then i'll create a github issue. I'll see if switching away from SWC helps

xenogeneic-maroon•13mo ago

@Sean Cassiere It's still happening sometimes, without SWC. It's not only from renaming files i think, i'm not 100% sure what happens but i suspect its some kind of race condition between webstorm (auto)saving the file and router-cli/vite plugin updating the routes. i have seen sometimes that the file is just 'corrupt'. as in, half of the original file is still there, then the tanstack generated part is at the start or at the end. I don't know if theres already a debounce in the file watcher At the moment we're so scared of it happening that we have to check every changed file in the routes folder before commiting to make sure they didnt reset, and if they did reset, to roll it back using webstorm's Local History. I understand that its a difficult issue to reproduce etc, perhaps it would be neat if the vite plugin's options could have something to make the route files read-only (but still update/generate the routeTree), just not writing to the route files themselves?

extended-salmon•13mo ago

Oh, I didn't realize your editor was Webstorm. I probably missed it in the OP. Its interesting that this weird race-condition is happening and we've never heard of it till today 🤔 We could probably implement a lock to prevent writing to route files but still letting the routeTree.gen.ts be written to. Could you create an issue for this on Github please? When anyone gets some bandwidth they could probably look into this.

xenogeneic-maroon•13mo ago

I can create an issue but we don't have reliable instructions on how to reproduce it, is that fine? (me and @Kenny work together btw) We also have mixed OS environments, he is on Linux/Manjaro and i'm on Windows 11. I do also notice that the line endings of the routeTree.gen.ts change after pulling from git since our platforms have different ones of course, and i couldnt find a setting for that - don't know if that is perhaps related

xenogeneic-maroon•13mo ago

Ahh actually i think the issue already exists.. https://github.com/TanStack/router/issues/2151 this describes the issue we're having. I'll add our insights into this issue

GitHub

Route files replaced with "Hello /route" boilerplate · Issue #2151...

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 cons...

Gaming

Programming

Route files keep resetting

Did you find this page helpful?