Lazy chunk Failed: Restore/Reload failed split chunk with react lazy and suspense in react 18.2.0

Question

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.

Answer 1

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.