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

Posted 2023-03-15

【中文标题】样式组件和 Webpack 5 联合模块之间的冲突（无效的钩子调用）

【英文标题】：Conflict between styled-components and Webpack 5 Federated Modules (Invalid hook call)

【发布时间】：2021-01-19 22:19:06

【问题描述】：

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

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

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

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

【问题讨论】：

提交了错误报告github.com/styled-components/styled-components/issues/3302

【参考方案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  ],
)

非常感谢Zach Jackson！