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

Question

I have migrated my code in react 18.2.0. I am using
Code splitting using suspense and lazy.
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.