0.5.0 breaks the TanStack Router's usage pattern for route index files

[Etsija]

We are using TanStack Router, and now the breaking changes in 0.5.0 seem to hit us like a hammer: we get countless warnings from every single route's index file:

Warning:   41:7  warning  Fast refresh only works when a file only exports components. Move your component(s) to a separate file. If all exports are HOCs, add them to the `extraHOCs` option  react-refresh/only-export-components

These files DO NOT export anything else but the Route. Example: https://github.com/eclipse-apoapsis/ort-server/blob/main/ui/src/routes/admin/index.tsx

I have read your justifications for the change, and somewhat agree, but at the very least, the warnings are very misleading, as they are hinting the files export something else than components - when there is only one export in the file. Moreover, we are using TanStack Router as per their documented pattern, of which the given file is a good example.

[silverwind]

I'm using a custom routing framework with files exporting a bunch of routes like this:

export const Routes = (
  <Fragment>
    <Route/>
    <Route/>
  </Fragment>
);

It causes warnings for all non-exported functions in the same module. Sadly this situation is unacceptable to me, I will have to remove the plugin.

[ArnaudBarre]

This is expected, createFileRoute doesn't return a component, so you have a local component in a file that doesn't export components.
TanStack does some tricks to make the HMR works for routes, but its incomplete. You can keep the existing behaviour by marking createFileRoute as a HOC: { "extraHOCs": ["createFileRoute"] }

[ArnaudBarre]

@silverwind there is an issue with this pattern:

• Either the file HMR, but the changes to the Routes export are not propagated, expect with you have custom HMR handling?
• Either the HMR propagates, which can lead to inefficient HMR

[silverwind]

Hmm I haven't tested HMR with such Routes definitions. Essentially the file exports ReactNode directly, it's not a component. But it's also the only export in these files, the other non-exported components in the file are rendered by these routes.

[Etsija]

This is expected, createFileRoute doesn't return a component, so you have a local component in a file that doesn't export components. TanStack does some tricks to make the HMR works for routes, but its incomplete. You can keep the existing behaviour by marking createFileRoute as a HOC: { "extraHOCs": ["createFileRoute"] }

This worked, thanks! I'll leave it up to you to decide whether you want to close the ticket, or maybe leave it open for a while to help others that experience similar problems.

[ArnaudBarre]

@silverwind what do you get when you edit one of the component in that files? What is the Vite or Next log?
If it does HMR update on the file, does adding/removing a Route in the route export works?

[silverwind]

It invalidates:

12:14:41 PM [vite] (client) hmr update /file.tsx, /index.css?direct
12:14:41 PM [vite] (client) hmr invalidate /file.tsx Could not Fast Refresh ("Routes" export is incompatible)

So you think the error is correct and I should change Routes to be a component?

[silverwind]

Changing to component seems to fix it:

export const Routes = () => (
  <Fragment>
    <Route/>
    <Route/>
  </Fragment>
);

12:17:08 PM [vite] (client) hmr update /file.tsx, /index.css?direct

So I think the only thing that bothers me is that the plugin does not highlight the Routes export, but all other components in the file.

[ArnaudBarre]

Yeah it default to warning for local components because when you can't change the export, it's often easier to move the component to another file and create a new import than move the export and updates places where it was exported

[silverwind]

Ok I fixed it with above refactor to add the function wrapper and then calling the function where these routes were used. Definitely a good catch by the plugin!

[ArnaudBarre]

Cool! I will let the issue open for a bit so that it's easier to find for people using TanStack.
For having this initial issue, probably this how your config should look like in 0.5:

import { defineConfig } from "eslint/config";
import { reactRefresh } from "eslint-plugin-react-refresh";

export default defineConfig(
  /* Main config, */
  reactRefresh.configs.vite({ extraHOCs: ["createFileRoute", "createRootRouteWithContext"] }),
);

[KirillTregubov]

Here is an extensive list for anyone still stumbling upon this issue:

import { defineConfig } from "eslint/config";
import { reactRefresh } from "eslint-plugin-react-refresh";

export default defineConfig(
  /* Main config, */
  reactRefresh.configs.vite({
    extraHOCs: [
      'createFileRoute',
      'createLazyFileRoute',
      'createRootRoute',
      'createRootRouteWithContext',
      'createLink',
      'createRoute',
      'createLazyRoute'
    ]
  }),
);