ChunkLoadError Loading chunk {number} failed.

[sergeushenecz]

Hello everyone. I have some problem with chunk load error when i deploy a new version code. I have lazy load routes. I have checked and when I go to the page.it tries to download the previous version chunk js file.
My service worker config.Maybe I have trouble in the config file.

 // Put it in the end to capture all the HtmlWebpackPlugin's
        // assets manipulations and do leak its manipulations to HtmlWebpackPlugin
        new OfflinePlugin({
            autoUpdate: true,
            relativePaths: false,
            publicPath: '/',

            // No need to cache .htaccess. See http://mxs.is/googmp,
            // this is applied before any match in `caches` section
            excludes: ['.htaccess'],

            caches: {
                main: [':rest:'],

                // All chunks marked as `additional`, loaded after main section
                // and do not prevent SW to install. Change to `optional` if
                // do not want them to be preloaded at all (cached only when first loaded)
                optional: ['*.chunk.js'],
            },

            // Removes warning for about `additional` section usage
            safeToUseOptionalCaches: true,

            AppCache: false,
            ServiceWorker: {
                events: true,
            },
        }),

 const runtime = require('offline-plugin/runtime'); 

    runtime.install({
        onUpdateReady: () => {
            runtime.applyUpdate();
        },
        onUpdated: () => {
            window.location.reload();
        },
        onUpdateFailed: () => {
        },
    });

[newsiberian]

@sergeu90, did you find out how to fix this?

[LeComptoirDesPharmacies]

We has the same problems.
To get rid of it, we check the error to be sure it's a chunk failed error, then we search in the cache to know if the cache doesn't have the file or if the chunk is invalid ( To avoid reload on syntax error )

As we know now our chunk is not in the cache, we trigger an update of our service worker and reload the page.

See code below :

errorBoundary.js :

  static getDerivedStateFromError(error) {
    const chunkFailedMessage = /Loading chunk [\d]+ failed/;
    if (
      error.name === 'ChunkLoadError' &&
      chunkFailedMessage.test(error.message)
    ) {
      return { hasChunkError: true };
    }
    return { hasCriticalError: true };
  }

  componentDidCatch(error, errorInfo) {
    if (this.state.hasChunkError) {
      // This is a chunk error, check if this error is normal or critical
      if (caches) {
        // Browser support caches, we can check chunk existence
        caches.match(error.request).then(r => {
          if (r === undefined) {
            // chunk is not in cache => application enctounter 404
            const isOnline = require('is-online'); // eslint-disable-line global-require
            isOnline().then(connected => {
              if (connected) {
                // user is online so missing chunk come from new version
                // we should update the service worker to update app
                window.swForceUpdate = true;
                OfflinePluginRuntime.update();
              } else {
                // user is disconnected, missing chunk come from offline
                this.setState({ isOffline: true });
              }
            });
          } else {
            // if chunk is found, then chunk may be corrupted
            this.setState({ hasCriticalError: true });
          }
        });
      } else {
        // if caches is not defined (not supported browser), then error is critical but we do not need to log to sentry
        this.setState({ hasCriticalError: true });
      }
    }
   ...
}

App.js :

    OfflinePluginRuntime.install({
      ...
      onUpdated: () => {
        // eslint-disable-next-line no-console
        console.log('SW Event:', 'onUpdated');
        if (window.swForceUpdate) {
          // if swForceUpdate, it means that a chunk is missing, reload the page immediately
          window.location.reload();
        }
        // Render a pop up to advise user to reload
      },
      ....
    });

[sergeushenecz]

@sergeu90, did you find out how to fix this?

no(