Lazy Loading react component get some warning

[bsnman]

I am building a Vite react ts app. I wanted to code split my components by using React.lazy
I tried import the component like so

import { lazy } from "react";
const Login = lazy(() => import("./Login.tsx"));

Is this supported? or am I doing something wrong

[maxxxymum]

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

[bsnman]

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?

[ArnaudBarre]

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

[bsnman]

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

[ArnaudBarre]

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

[bsnman]

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

[netcoding87]

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} />
}

[ArnaudBarre]

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

[bsnman]

Second option works for me also. Thanks

[kurpav]

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

[ArnaudBarre]

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

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

[ArnaudBarre]

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

[ImVictorM]

I was able to get around this by using react's createElement() and changing the file extension from .tsx to .ts.
So the code went from this:

// routesPublic.tsx
import { lazy } from "react";
import { RouteObject } from "react-router-dom";

// Fast refresh warning!
const Login = lazy(() => import("@/pages/Login"));

const routesPublic: RouteObject[] = [
  {
    path: "/",
    element: <Login />,
  },
];

export default routesPublic;

to this:

// routesPublic.ts
import { createElement, lazy } from "react";
import { RouteObject } from "react-router-dom";

// No warning!
const Login = lazy(() => import("@/pages/Login"));

const routesPublic: RouteObject[] = [
  {
    path: "/",
    element: createElement(Login),
  },
];

export default routesPublic;

In my case, I'm using separate files for public and private routes. I wrapped them in a routes.tsx file and used them normally in the router.

// routes.tsx
import { RouteObject } from "react-router-dom";
import { RouteAuthRequired } from "../components";

import routesPrivate from "./routesPrivate";
import routesPublic from "./routesPublic";

export const routes: RouteObject[] = [
  ...routesPublic,
  {
    element: <RouteAuthRequired />,
    children: routesPrivate,
  },
];

export default routes;

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

export const router = createBrowserRouter(routes);

export default router;