Uncaught ChunkLoadError: Loading chunk | Module Federation webpack 5 while loading CDN module

Question

Implemented Module Federation for Host and Remote Application. For the Remote application, federated module is uploaded on a CDN. While accessing the federated module on localhost, Host application is working fine but while accessing the module using CDN link, getting an error. Error exists during Lazy Loading of the federated module:

Uncaught ChunkLoadError: Loading chunk 531 failed.

Below is my module federation configuration in webpack (Host app):

**new ModuleFederationPlugin({
            name: 'common',
            filename: 'common',
            remotes: {
sampleAppModule: sampleApp@http://CDN-link/remoteEntry.js
// sampleAppModule: sampleApp@http://localhost:8000/remoteEntry.js (this works fine)
            },
            shared: [sharedDependencies],
        })**

Able to see the federated module on CDN link by directly accessing it. Also, successfully getting 200 status while fetching remoteEntry.js file but error comes when lazy loading the remote module.

Answer 1

This exception can arise when the public path of the remote module is misconfigured, so even if the app can access to the remoteEntry, then it fails to find other chunks because it tries to fetch them from a wrong location. Using code splitting you need to set a Dynamic Public Path on remotes. Webpack can automatically determine the public path when setting an Automatic publicPath. If that is the case, you just need to update the webpack configuration of your remotes like this.

webpack.config.js

module.exports = {
  ...
  output: {
    ...
    publicPath: 'auto',
  },
};

If the error appears intermittently, another cause of this exception is misconfigured CDN cache. It's common to configure Webpack using output filenames depending on content hash in combination with long expiration time for cached content on CDN. This configuration optimizes performances because user browsers will cache static assets locally and use those files for subsequent requests.

When using Webpack Module Federation, the remoteEntry.js represents a stable entry point for the remote module. For this reason its name won't change on subsequent builds, even if its content changes. It is updated at every build because it contains a "map" of other files, whose names are dynamically generated with content hash. So, this file should never be cached, allowing the browser to download new files when a deploy occurs.

You can avoid to cache the remoteEntry.js by setting for it a Cache-Control header like Cache-Control: max-age=0 on the server. It's very important to set this header only on the remoteEntry.js file and not setting it as the server default, otherwise every file will be not cached.

Alternatively, if you can invalidate CDN cache for this file, you can set Cache-Control: max-age=0, s-maxage=<time> and invalidate the CDN cache for remoteEntry.js at every deploy. This header allows caching only on shared caches, like the CDN. That way your CDN can serve requests to remote entry, avoiding to request it to the server.