I have migrated my code in react 18.2.0. I am using

1. Code splitting using suspense and lazy.
2. Single page application

Split chunk loaded perfetly and Happy flow is working. Below is the code

let LoginPageM = React.lazy(() => import('./LoginPageM' /* webpackChunkName: 'LoginPageM' */));

const Index = ({ isSSR, ...props }) => {
  return (
    <React.Suspense fallback={<LoaderUI />}>
      <LoginPageM isSSR={isSSR} {...props} />
    </React.Suspense>
  );
};

Problem: but, what if chunk has been failed to load due to Network Sluggish or User is offline.

Because chunk has been failed so we have shown a fallback UI with retry button. On click on retry Button, need to download the chunk again.

I called Index function, thought react will retry to download chunk and the same was happened with react-loadable, but LoginPageM has stored failed lazy component. It is again saying to suspense that LoginPageM has been failed to load instead of reloading it.

Yes, It is problem with React Suspense and lazy.

but you can tackle this problem by checking the status of react lazy component.

const refresh = () => React.lazy(() => import('./LoginPageM' /* webpackChunkName: 'LoginPageM' */));

let LoginPageM = refresh();

const Index = ({ isSSR, ...props }) => {
  if (LoginPageM._payload._status === 2) { LoginPageM = refresh(); }
  return (
    <React.Suspense fallback={<LoaderUI />}>
      <LoginPageM isSSR={isSSR} {...props} />
    </React.Suspense>
  );
};

Now, here when you retry to load Index function it will check the status of lazy loaded component. if the status is 2 you can again lazy load the same component and assign back to LoginPageM.