webpack5：共享模块总是报告容器初始化失败，因为它已经用不同的共享范围进行了初始化

Posted 2023-02-16

【中文标题】webpack5：共享模块总是报告容器初始化失败，因为它已经用不同的共享范围进行了初始化

【英文标题】：webpack5: shared module always report Container initialization failed as it has already been initialized with a different share scope

【发布时间】：2021-01-28 22:23:23

【问题描述】：

我通过三个项目尝试模块联合：shell、app1 和 app2。 shell 的 webpack 配置是这样的：

 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']
      ),

app1 和 app2 的配置如下：

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

shell负责根据路由加载app1和app2。打开页面app1（或app2）时，就可以了。但是如果从一个应用程序导航到另一个应用程序，则会引发异常：容器初始化失败，因为它已经使用不同的共享范围进行了初始化。

我发现当打开一个应用页面时，比如app1页面，它会发送一个范围对象包括react和react-dom到share模块的init方法。但是当导航到 app2 时，app2 创建的另一个作用域对象也将被发送到共享模块的 init 方法。共享模块会比较这两个共享范围，如果不一样，会不会异常。

我不确定这是一个错误还是我缺少一些配置。我尝试查找与模块联合相关的文档，但未找到与共享范围相关的有用信息。有没有人知道这件事？ 顺便说一句，我也试过了

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

它也不起作用。

问候

【问题讨论】：

您找到解决方案了吗？

不知道这有帮助，但库定义似乎有语法错误，name: ‘she’ll

【参考方案1】：

在我的例子中，当webpack entry name与ModuleFederationPlugin name相同时，发生错误。

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