Learn how to fix ChunkLoadError in ReactJS with a retry approach using lazy loading. Includes working code, simple logic and more. Our Server Management support team is always here to help you.
How to Fix ChunkLoadError in ReactJS Without Frustrating Your Users
A ChunkLoadError can be one of the most annoying issues for users. Everything works fine in development, but once the app is deployed, some visitors suddenly face a broken screen. This happens because the browser tries to load outdated chunks from cache while you’ve already deployed a fresh build. A quick refresh usually solves it, but you can’t expect every user to figure that out on their own.
Instead of leaving them stuck, you can handle it directly in your ReactJS code. Below, you’ll see how to fix ChunkLoadError with a retry mechanism that refreshes the browser only once, ensuring your users get the latest code without endless reload loops.
An Overview
Why Does ChunkLoadError Happen?
When you push a new deployment, the chunk file names may change. Users who already have the old bundles cached may end up requesting files that no longer exist. That’s when the ChunkLoadError shows up. Network interruptions or firewall issues can also trigger it, but the main culprit is usually outdated bundles.
A Smarter Way to Handle It
If you’re code splitting in ReactJS using React.lazy, the following approach works perfectly. And if you’re using dynamic imports, the same idea applies. Instead of directly importing your component, wrap it with a retry function.
For example, instead of this:
const UserSettings = React.lazy(() => import(/* webpackChunkName: "userSettings" */ './settings')));You update it like this:
const UserSettings = React.lazy(() => lazyRetry(() => import(/* webpackChunkName: "userSettings" */ './settings')));Here, lazyRetry will catch the ChunkLoadError, refresh the page once, and then load the correct chunk.
Building the lazyRetry Function
Let’s start with the base function:
const lazyRetry = function(componentImport) {
return new Promise((resolve, reject) => {
// TO DO
});
};Since React.lazy expects a promise, we’ll expand this function to attempt the import and handle errors.
const lazyRetry = function(componentImport) {
return new Promise((resolve, reject) => {
componentImport().then((component) => {
resolve(component);
}).catch((error) => {
// TO DO
reject(error); // there was an error
});
});
};Now it works, but we still haven’t solved ChunkLoadError. Let’s improve the error handling.
Adding a Refresh Only Once
We’ll use sessionStorage to make sure the page only refreshes one time. That way, if the error happens again, it won’t keep looping.
// a function to retry loading a chunk to avoid chunk load error for out of date code
const lazyRetry = function(componentImport) {
return new Promise((resolve, reject) => {
// check if the window has already been refreshed
const hasRefreshed = JSON.parse(
window.sessionStorage.getItem('retry-lazy-refreshed') || 'false'
);
// try to import the component
componentImport().then((component) => {
window.sessionStorage.setItem('retry-lazy-refreshed', 'false'); // success so reset the refresh
resolve(component);
}).catch((error) => {
if (!hasRefreshed) { // not been refreshed yet
window.sessionStorage.setItem('retry-lazy-refreshed', 'true'); // we are now going to refresh
return window.location.reload(); // refresh the page
}
reject(error); // Default error behaviour as already tried refresh
});
});
};[If needed, Our team is available 24/7 for additional assistance.]
Conclusion
This simple approach ensures your users won’t be left staring at a blank screen. By handling ChunkLoadError with a one-time refresh, you serve the latest code instantly without manual intervention. Instead of pushing them to hit refresh, your app takes care of it automatically.
That’s the cleanest way on how to fix ChunkLoadError without hacks or messy workarounds.
0 Comments