javascript - 样式组件和 Webpack 5 联合模块之间的冲突（无效的钩子调用）

Question

一直在尝试 Webpack 的 5 Module Federation 并遇到了这个问题。尝试了很多方法，但似乎都没有奏效。基本上，当我尝试styled-components在联合模块上使用时，我得到了 React 的Invalid hook call错误。

这是一个尝试重现该问题的存储库：

• https://github.com/oncet/federated-modules-styled-components

我想知道我是否遗漏了什么，或者这是否是某种错误。

标签： javascriptreactjswebpackstyled-components

Answer 1

通过告诉 Webpack 将 React 用作​​单例来解决问题。

在foo/webpack.config.js我更改shared为[{ react: { singleton: true } }].

new ModuleFederationPlugin({
  name: 'foo',
  filename: 'remoteEntry.js',
  exposes: {
    './Foo': './src/App',
  },
  shared: [{ react: { singleton: true } }],
})

非常感谢扎克杰克逊！