I am working on a project using Module Federation with a shell application and three microfrontends (a, b, c). I need to configure the setup so that:

The shell application uses [email protected].
Each microfrontend (a, b) uses [email protected].

And c uses [email protected]

The challenge is to configure Module Federation to handle these different versions without breaking the application or impacting performance.

Current Setup
Dependencies:

Shell Application: [email protected]

Microfrontends: [email protected]

Webpack Configuration:

Shell Application (webpack.config.js):

const deps = require('./package.json').dependencies;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      filename: 'remoteEntry.js',
      remotes: {
        a: 'a@url/aRemoteEntry.js',
        b: 'b@url/bRemoteEntry.js',
        c: 'c@url/cRemoteEntry.js',
      },
      shared: {
        'ui-library': {
          requiredVersion: '1.0.0',
          singleton: true, // Ensures only one instance of version 1.0.0
          eager: true,
        },
      },
    }),
  ],
};

Microfrontend A (webpack.config.js):

const deps = require('./package.json').dependencies;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'microfrontendA',
      filename: 'remoteEntry.js',
      exposes: {
        './ComponentA': './src/ComponentA',
      },
      shared: {
        'ui-library': {
          import: 'ui-library',
          requiredVersion: '1.5.0',
          singleton: false, // Allows multiple instances of version 1.5.0
          eager: true,
        },
      },
    }),
  ],
};

Microfrontend B (webpack.config.js):

const deps = require('./package.json').dependencies;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'microfrontendB',
      filename: 'remoteEntry.js',
      exposes: {
        './ComponentB': './src/ComponentB',
      },
      shared: {
        'ui-library': {
          import: 'ui-library',
          requiredVersion: '1.5.0',
          singleton: false,
          eager: true,
        },
      },
    }),
  ],
};

Microfrontend C (webpack.config.js):

const deps = require('./package.json').dependencies;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'microfrontendC',
      filename: 'remoteEntry.js',
      exposes: {
        './ComponentC': './src/ComponentC',
      },
      shared: {
        'ui-library': {
          import: 'ui-library',
          requiredVersion: '1.2.0',
          singleton: false,
          eager: true,
        },
      },
    }),
  ],
};

Issues Encountered

Even after setting singleton to false for the microfrontends and singleton to true for the shell application, the setup still fails when attempting to use different versions of ui-library.

Request for Help

Can anyone provide guidance on how to configure ModuleFederationPlugin to allow the shell to use [email protected] while the microfrontends use different versions of ui-library? The goal is to avoid breaking the application and to maintain optimal performance. Any advice or solutions would be greatly appreciated!

Thank you for your help!