React Clear Cache, chunk load error

Sometimes you get an error in the browser because of trying to load wrong or old chunk files and the browser has no longer access to these files.

Follow this detailed guide to fully understand the problem and fix it.

Why did you get this error?

Let’s assume you have built your components with the following Webpack configuration :

Webpack hash chunk configuration in webpack.config.js

After the build process is finished, you have three types of HTML and javascript files to load:

index.html, main.[[hash]].js , component.[hash].js

hash is a random unique string.

By default index.html loads main.[hash].js and main itself loads component.[hash].js you have no problem and everything works, but the next time you build and deploy the new version of the website you might get the error.

Let’s assume you use React. lazy for loading not needed page by default, or the browser has enabled cache and the browser loads index.html and it loads old cached files including main.[hash].js and component.[hash].js but we want the browser to load updated files with a new hash and finally you get the error.

In Micro-frontend module federation architecture most of the time when you update and deploy remote entry files the browser gets this error.

Common Solution that most of the time comes to our mind is refreshing the page and clearing cache manually to solve this problem and it works but we can not force our users to do these things we want to solve this problem technically.

Solutions

We will do something to clear the cache and reload the page automatically if we get these kinds of errors.

1. Tell the browser not to cache your page (index.html)

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

2. Create custom lazy function to catch error, clear cache and reload page :

import {lazy} from 'react';

const lazyWithRetry = (componentImport) =>
    lazy(async () => {
        const pageHasAlreadyBeenForceRefreshed = JSON.parse(
            window.localStorage.getItem(
                'page-has-been-force-refreshed'
            ) || 'false'
        );

        try {
            const component = await componentImport();

            window.localStorage.setItem(
                'page-has-been-force-refreshed',
                'false'
            );

            return component;
        } catch (error) {
            if (!pageHasAlreadyBeenForceRefreshed) {
                // Assuming that the user is not on the latest version of the application.
                // Let's refresh the page immediately.
                caches.keys().then((names) => {
                    names.forEach((name) => {
                        caches.delete(name);
                    });
                });
                window.localStorage.setItem(
                    'page-has-been-force-refreshed',
                    'true'
                );
                return window.location.reload();
            }

            // The page has already been reloaded
            // Assuming that user is already using the latest version of the application.
            // Let's let the application crash and raise the error.
            throw error;
        }
    });

In your React code, replace lazy by lazyWithRetry:

Reference : https://raphael-leger.medium.com/react-webpack-chunkloaderror-loading-chunk-x-failed-ac385bd110e0

3.Update package.json version each time you modify the components and deploy:

import packageJson from “../package.json”;

caching= ()=> {
let version = localStorage.getItem('version');
    if(version!=packageJson.version)
    {
        if('caches' in window){
         caches.keys().then((names) => {
        // Delete all the cache files
        names.forEach(name => {
            caches.delete(name);
        })
    });

    // Makes sure the page reloads. Changes are only visible after you refresh.
    window.location.reload(true);
}

      localStorage.clear();
      localStorage.setItem('version',packageJson.version);
    }
};

Conclusion

After reading this article you should understand the reasons that make this error happen and how to solve this problem.
You should be able to fix the problem and implement a fixed version of the project.

By the way, if this article helped you, don’t forget to clap & subscribe! 🙂

thanks.