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

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

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

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

有关更多技术细节，请查看带有实现的 example repo。

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

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

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

打印警告：

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

解决方法

我遇到了同样的问题，我通过将所有样式化组件移到远程应用程序中并从那里公开它们来解决了这个问题。

,

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

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

另外，我曾经lerna。它可以帮助您处理微服务的依赖项。

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