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 },
                ...
            },
        })
      ])
  }