How to avoid ChunkLoadError when using @loadable/component in create-react-app?

Question

Solution for this issue is available when using React.lazy:

• https://www.codemzy.com/blog/fix-chunkloaderror-react
• https://raphael-leger.medium.com/react-webpack-chunkloaderror-loading-chunk-x-failed-ac385bd110e0

However we are using @loadable/component and it is less clear how we can resolve these ChunkLoadError's when using this module. We just recently started code-splitting in our application, and the headache from these errors has been offsetting any performance gain our web application has gotten.

How can we prevent ChunkLoadError's when using @loadable/component?

Answer 1

The reason we were using @loadable/component in the first place is for the .preload() function. However, until we can resolve this ChunkLoadError issue, we are going to stop using @loadable/component.

We've installed https://www.npmjs.com/package/react-lazy-with-preload and followed the exact solution in the medium post above, except we used lazyWithPreload instead of lazy within the lazyWithRetry function.

We can then load components as such in our App.js file:

const ShotChartsApp = lazyWithRetry(() => import(/* webpackChunkName: "ShotChartsApp" */ './containers/AppPages/ShotChartsApp'));

function App() {
    ...
    // Load the lazy-loaded components
    useEffect(() => {
        ShotChartsApp.preload();
    }, []);
}

I am hopeful that this solution handles all 3 of:

• has code splitting so first page load is quick
• preloaded components so that users don't need to wait for components to load as they are being visited
• no LoadChunkErrors

fingers crossed that this works...