Changes to routes containing loaders in dev mode causes router to stop functioning

[mattburton]

Thrilled to have found this library - pretty much exactly what I was looking for! One minor thing I've found thus far is it seems that changing a route that contains a loader such as posts/[slug].tsx in the data-loaders example while it's running in dev mode causes the router to stop functioning and a reload is necessary to get things working again. It happens with any route that contains a loader based on my experimentation, not just child routes. Any idea what that could be?

[oedotme]

Glad to hear that!

Although I've not noticed that in the examples before, but I encountered similar behavior in other projects, this happens because of the page multiple exports which breaks Vite's HMR at the moment, there's a related issue reported.

There was an experimental HMR partial accept added to Vite v3 recently addressing that. Partial accept discussion

However, I found one of the following points would get HMR to work:

Exporting only Capitalized functions/components

That would require changing generouted expected exports from loader, pending, error → Loader, Pending, Failure.

// src/pages/posts/[slug].tsx
// ...

export const Loader = () => {}

export const Pending = () => {}
export const Failure = () => {}

export default function Post() {}

Upgrading to Vite v3+ and enabling experimental partial accept:

// vite.config.ts
// ...

export default defineConfig({ 
  plugins: [react()],
  experimental: { hmrPartialAccept: true },
})

Adding this line at the end of each page module:

// src/pages/posts/[slug].tsx
// ...

export const loader = () => {}

export const pending = () => {}
export const error = () => {}

export default function Post() {}

if (import.meta.hot) import.meta.hot.acceptExports('default')

I'm thinking of changing pending, error → to Pending, Failure anyways, it might be a little weird but have no problem changing loader to Loader as well, which I prefer if it wouldn't cause an issue.

Or maybe add a tiny plugin to inject this if (import.meta.hot) import.meta.hot.acceptExports('default') line to each page module automatically, and to keep it loader.

Would love to hear what you guys think!

[mattburton]

Hi @oedotme - just got a chance to follow up here and I see you've already made a new release with the change to capitalize those functions - thanks! I would have voted for that option as well - sure it's a departure from how Remix/upcoming React Router version does it (since that's where I'm sure most devs will be coming from when they go searching for better options and hopefully find generouted 😃) but having them named this way makes more sense to me anyways - it distinguishes these functions as implementing an interface in the framework vs private functions that are part of the module. Also Pending and Failure are really component definitions themselves so it's logical that they follow the standard naming convention there.

Tested it out with the new version and everything is working great - thanks again for the quick turnaround and the wonderful library!