Lazy Loading react component get some warning about eslint-plugin-react-refresh HOT 14 OPEN

Yeah this kind of a false warning, I will see what I can do.
There are two solutions:

• Put a disable comment for this rule for all the file. This will not actually break fast refresh so this ok>
• Instead of exporting the router, export a component that render the Router provider

The advantage of the second solution is that if react-rouder handle runtime change in the router config, you could HMR updates to the config

from eslint-plugin-react-refresh.

Second option works fine for me 👍

Example:

import {
  RouteObject,
  RouterProvider,
  createBrowserRouter,
} from 'react-router-dom'

const MyComponent = React.lazy(() => import('./MyComponent'))

const routes: RouteObject[] = [
  {
    element: <MyComponent />,
    path: 'example',
  },
]

const router = createBrowserRouter(routes)

export const Routes: React.FC = () => {
  return <RouterProvider router={router} />
}

from eslint-plugin-react-refresh.

I looked at it more carefully and both the Babel plugin and SWC are generating some registration code for const Login = lazy(() => import("./pages/Login"));, so actually the warning may not be wrong. I need to look at it in more details, I will comeback to it affer other issues but I think exporting a wrapper of the RouterProvider is a good way to fix the issue for now

from eslint-plugin-react-refresh.

@kurpav In that case you can have a lazy-routes.tsx which contains exports like const ViewA = React.lazy(() => import('./views/ViewA.tsx')) and then have a router.tsx which can import all components and export the router.

Be careful to where you import the router so it doesn't create circular imports, which are bad for HMR.

from eslint-plugin-react-refresh.

Same as the answer above, you need to put the the lazy wrappers into a separate file so that the router file doesn't contains any component and can safely be exported

from eslint-plugin-react-refresh.

@bsnman

You can check the Vite output in console for something like:

[vite] hmr invalidate /src/components/Login.tsx Could not Fast Refresh. Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports

Your component is breaking fast refresh if this message is present I guess.

from eslint-plugin-react-refresh.

No, it does not output

[vite] hmr invalidate /src/components/Login.tsx Could not Fast Refresh. Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports

HMR Fast Refresh actually works, but the eslint react-refresh gives a warning on my IDE

ESLint: Fast refresh only works when a file only exports components. Move your component(s) to a separate file.(react-refresh/only-export-components)

Should this be fix on this eslint plugin?

from eslint-plugin-react-refresh.

Can I have more code that trigger the issue. I don't think this two lines triggers a warning

from eslint-plugin-react-refresh.

Yes, here is the code for my router.ts that I want to lazy load some components.

// router.ts
import { createBrowserRouter } from "react-router-dom";
import { lazy } from "react";

const Login = lazy(() => import("/src/pages/Login"));   // warning here
const Home = lazy(() => import("/src/pages/Home"));    // and here

const router = createBrowserRouter([
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "",
    element: <Home />,
  },
]);

export default router;

Login component looks like so

import ...

function Login() {
    ...
    return <>...</>
}

export default Login;

Importing them without React.lazy does not trigger a warning

from eslint-plugin-react-refresh.

I'll try implementing the second solution first. Thanks for the quick feedback.

from eslint-plugin-react-refresh.

Second option works for me also. Thanks

from eslint-plugin-react-refresh.

@netcoding87 thanks for the example.
I wonder how to export router then to do navigation outside of react components.
Are there any ideas?

from eslint-plugin-react-refresh.

@ArnaudBarre
I want to implement option two. But what if I have two route files (public and protected) like React Bulletproof?

I can't create two browser routers. my route files are very similar to React bulletproof.

from eslint-plugin-react-refresh.