webpack5: shared module always report Container initialization failed as it has already been initialized with a different share scope

Question

I try module federation via three projects: a shell, app1 and app2. The webpack config for shell is like this :

 new ModuleFederationPlugin({
        name: ‘she’ll,
        library: { type: 'var', name: ‘she’ll },
        filename: 'remoteEntry.js',
        exposes: {
          './util': './src/common/utils',
          './Hello': './src/components/test/HelloWorld',
          './MicroApp': './src/shared/MicroApp',
        },
        shared: ['react', 'react-dom']
      }),

the config for app1 and app2 is like:

      new ModuleFederationPlugin({
        name: 'app1',
        remotes: {
          Shell: `shell@${sharedModuleAddress}/remoteEntry.js`
        },
        shared: ['react', 'react-dom']
      }),

shell is responsible for loading app1 and app2 according to the route. when open page app1 (or app2), it will be ok. But if navigate from one app to another, it will raise exception : Container initialization failed as it has already been initialized with a different share scope.

I found that when open one app page, like app1 page, it will send a scope object include react and react-dom to init method of share module. But when navigate to app2, another scope object created by app2 also will be send to init method of shared module. The share module will compare these two share scope, if they are not the same, will that exception.

I am not sure this is a bug or I am missing some configuration. I have try to find document related to module federation, not found usefule info relate to share scope. Any body know about this? BTW, I have also tried

       shared: {
          react: {
            singleton: true
           },
           'react-dom': {
             singleton: true
         }
         }

it not work either.

Regards

Answer 1

In my case，when webpack entry name is same with ModuleFederationPlugin name, the error occured.

  entry: {
    admin: path.join(__dirname, 'src/index.js'),
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'admin', // same with entry name
      ...
    })
  ]