在 CRA 微前端应用程序中初始化的“样式组件”的几个实例

Question

我正在运行一个具有多个 React 版本的微前端应用程序，每个微前端存储库都使用延迟加载来动态加载其 React 版本，并且它按预期工作（耶！）微前端应用程序的结构如下：

话虽如此，我遇到了样式组件多版本控制的问题，并在开发模式下（不在生产​​中）收到以下控制台警告：

有关更多技术细节，请查看带有实现的示例存储库。

由于该应用程序使用 CRA 来简化 webpack/babel 的配置，我想知道是否有改进初始配置以解决此控制台警告的好方法。

我检查了警告中共享的文档链接，虽然我知道微前端不是维护项目的最佳方式，但我们仍然希望向我们的用户提供此选项，因为他们可能需要逐步迁移他们的项目版本，所以我仍然有兴趣解决这个控制台警告。

任何提示或建议的解决方案将不胜感激。

打印警告：

react_devtools_backend.js:2430 看起来这个应用程序中初始化了几个“样式组件”的实例。这可能会导致动态样式无法正确呈现、重新水化过程中出现错误、缺少主题道具，并在没有充分理由的情况下使您的应用程序变大。有关更多信息，请参阅https://sc.sh/2BAXzed。

Answer 1

我的微服务应用程序也遇到了同样的问题。对于每个微服务，我都有 package.json 文件和一个适用于所有微服务的全局 package.json 文件。因此，在全局 package.json 中我添加了分辨率，它允许我的应用程序只有一个版本的样式组件

"resolutions": { "styled-components": "4.2.1" },

还有，我以前也这样lerna。它可以帮助您解决微服务的依赖关系。

希望我的回答能够帮助您解决您的问题。