T
TanStack•2y ago
sensitive-blue

HMR with file based routing

I'm using the file based routing with router-vite-plugin. Every time I'm making a change in a route and tap save, the whole page refreshes. Is this how it should work? For example I'm changing the styling and I see a full page reload. Maybe it's because is re-generating the routes? This doesn't happen with code based routing. Is there a solution for it?
16 Replies
optimistic-gold
optimistic-gold•2y ago
If the actual page component is in the same file as the Route definition this could happen because the vite-plugin will pick it up your saves as changes and generate the route tree accordingly. You could either, move the file out. 
// posts/-components/page.tsx
export const Page = () => <div>Posts</div>

// posts/route.tsx
import { Page } from './-components/page'

export const Route = new FileRoute(...).createRoute({ ..., component: Page });
// posts/-components/page.tsx
export const Page = () => <div>Posts</div>

// posts/route.tsx
import { Page } from './-components/page'

export const Route = new FileRoute(...).createRoute({ ..., component: Page });
Or utilize the auto code-splitting feature, and simply use named exports. 
// posts/component.tsx
export const component = () => <div>Posts</div>

// posts/route.tsx
export const Route = new FileRoute(...).createRoute({
  // whatever options, just don't define the component
});
// posts/component.tsx
export const component = () => <div>Posts</div>

// posts/route.tsx
export const Route = new FileRoute(...).createRoute({
  // whatever options, just don't define the component
});
I'm using the second approach, and when editing the component.tsx file, I don't experience full-page refreshes.
sensitive-blue
sensitive-blueOP•2y ago
@Sean Cassiere Should I declare the FileRoute? I'm going according to docs. For example I have folder structure like this routes/posts/index.compoment.tsx. Then the router plugin generates the routeTree with all the initialization of FileRoutes.
optimistic-gold
optimistic-gold•2y ago
It's possible, that if you aren't declaring posts/index.route.tsx and using a virtual route, that the plugin then has to watch for changes to that file. Maybe try it with a route declaration file and give it a shot to see if it goes away
sensitive-blue
sensitive-blueOP•2y ago
I have this example in stackblitz: https://stackblitz.com/edit/github-g4hol2 Try to do a simple change in route components. It will cause a full-page refresh. Maybe i'm doing something wrong, i don't know..
optimistic-gold
optimistic-gold•2y ago
That may be a Stackblitz thing. In local development, when editing index.component.tsx (and having a index.route.tsx file properly defined), I'm able to get hot reloading.
optimistic-gold
optimistic-gold•2y ago
This is the repo I'm using, maybe checkout the vite config and rest? https://github.com/SeanCassiere/nv-rental-clone
GitHub
GitHub - SeanCassiere/nv-rental-clone: Navotar with Tailwind and th...
Navotar with Tailwind and the Tanstack. Contribute to SeanCassiere/nv-rental-clone development by creating an account on GitHub.
optimistic-gold
optimistic-gold•2y ago
For reference, and HRM update did happen. Just forgot to keep the terminal open.
No description
sensitive-blue
sensitive-blueOP•2y ago
Still the same. I even tried it locally and the same happens
No description
sensitive-blue
sensitive-blueOP•2y ago
i just saving this file without changing anything and a page reload occurs for milliseconds when hitting CTRL+S it show "Regenerating routes..." so every time i save anything inside routes folder the tanstack-router plugin regenerating the routes that's why it causes page reload
sensitive-blue
sensitive-blueOP•2y ago
this is the simpliest thing i could have had
No description
sensitive-blue
sensitive-blueOP•2y ago
hitting just CTRL+S i'm having a full page reload
optimistic-gold
optimistic-gold•2y ago
I also get the "Rengerating routes" message, but for whatever reason it doesn't trigger a full refresh for me.
optimistic-gold
optimistic-gold•2y ago
Could you check the package versions for the following? vite - 5.0.12 @vitejs/plugin-react - 4.2.1
sensitive-blue
sensitive-blueOP•2y ago
vite - 5.0.8 @vitejs/plugin-react -4.2.1 I'll try upgrading vite ok still the issue persists with vite 5.0.12 ok i changed a little bit the implementation and i created an app-entry.tsx instead of initializing the router inside main.tsx. Something like this: https://stackblitz.com/edit/github-g4hol2-sqtddj . I tested this also locally and i have exactly the same result. now it says [vite] hmr update /src/globals.css, /src/app-entry.tsxwhich i'm not sure if its either correct as it should update the component.tsx After HMR update i receive a blank screen and i have to refresh the browser to get it back. The same thing is reproducable on stackblitz i opened an issue on Github cause i don't think it's a coincidence that it happens on my local dev server and on stackblitz
correct-apricot
correct-apricot•2y ago
can you test this PR? https://github.com/TanStack/router/pull/1054
GitHub
Handle router prop update in RouterProvider by ArnaudBarre · Pull R...
Without this HMR of routes just doesn't work for code base routing. I think the example should be updated to provide better HMR pattern, and least have something like: // App.tsx export functio...
sensitive-blue
sensitive-blueOP•2y ago
Nothing changed still the same

Did you find this page helpful?