Error Catalog#

This section is a collection of common issues related to the implementation of Module Federation in general. The main goal is to provide additional context and solution paths for beginners not familiar with the fundamental ways of how Module Federation is working at its core.

Unable to use module-name's URL with module-name_provider's globalName to get remoteEntry exports#

Error Message#

Solution#

Set shareStrategy as 'loaded-first' host

{
    ...
    new ModuleFederationPlugin({
        ...,
        shareStrategy: 'loaded-first',
      })
  }

3. Optional: If you are running module-federation in a Docker environment, make sure to adapt the following fields in your configs of all hosts and remotes:

{
    rspack: (config, {appendPlugins}) => {
        ...
        config.publicPath = "auto";
        config.output.uniqueName = "module-name";
        delete config.optimization?.splitChunks;
      },
      appendPlugins([
        new ModuleFederationPlugin({
            ...,
            runtime: false,
        })
      ])
  }

Resolve error: Cant't resolve module-namespace/module-component in implementation-path#

Error Message#

Solution#

When checking your browser network traffic you might see that no mf-manifest.json file is being loaded. This is because the module-namespace is not being resolved correctly. Make sure the path to the actual exposed module_provider.js file in your remote is resolving with status code 200.

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:#

Error Message#

Solution#

This error occurs when you work a lot with shared-dependencies. After loading modules it is not clear which version of each shared-dependency should be used. To resolve this, switch to the shared notation of the option field shared The object notation allows for more control of the shared-dependencies.

For us, the option singleton is mandatory to consolidate all versions of shared-dependencies to the lowest matching version.

In addition, the option eager encapsulates all shared-dependencies into a dedicated output entry. This can be helpful to solve possible race-condition artifacts in the runtime. The drawback which this option is a slightly increased network traffic because of the additional output entry.

{
    ...
    new ModuleFederationPlugin({
            ...,
         // Default basic configuration
         // shared: [
         //   'react',
         //   'react-dom',
         //   'my-custom-module'
         // ]

         // Configuration with more specificity
            shared: {
                react: { singleton: true, eager: true },
                'react-dom': { singleton: true, eager: true },
                'my-custom-module': { singleton: true, eager: true },
                ...
            },
        })
      ])
  }

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'call')#

Error Message#

Solution 1#

Example scenario: You have an npm package with eager remote imports (such as import Button from 'myRemote/button') and share this npm package with eager: true.
Example scenario: You're sharing a mix of packages, some with eager: true and others with eager: false, and the eager: true packages import the eager: false shared packages.

This error occurs when a remote (often a library-like shared module) contains unwanted circular dependencies between the shared dependencies of the remote and other consumers or the host application. If the environment is using the Module Federation config shared: { "package-name": { eager: true } }, the Rspack/Webpack builder runtime will break with this error.

To resolve this, remove the eager: true option from the shared configuration of all connected remotes and the host application. This will prevent the shared dependencies from being eagerly loaded and will allow the remote to be loaded correctly.

Since eager consumption wraps all dependencies inside the entry file of the remote, Rspack/Webpack cannot detect the specific handlers for each dependency, resulting in undefined.

Solution 2#

You are missing an "async boundary" in your application. Ensure that you have a dynamic import at the top of the application.
For example, if your entry point is index.js, copy the contents of index.js into a new file called bootstrap.js. Then, in index.js, replace the code with import('./bootstrap.js').

Alternatively, you can try the hoisted runtime experiment, which removes the need for an async boundary in user code. Learn more here: Hoisted Runtime Experiment.