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

Question

我正在运行一个具有多个React版本的微前端应用程序，每个微前端回购都使用延迟加载来动态加载它的React版本，并且按预期工作(Yay!)微前端应用程序的结构如下：

​

尽管如此，我在样式组件的多版本控制方面遇到了问题，并在dev模式(而不是在生产中)接收到以下控制台警告：

​

​

有关更多技术细节，请查看带有该实现的示例回购。

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

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

如有任何建议或建议的解决方案，将不胜感激。

印刷警告：

react_devtools_backend.js:2430在这个应用程序中似乎有几个“样式-组件”初始化的实例。这可能导致动态样式无法正确呈现，在补水过程中出现错误，这是一个缺少的主题支柱，并使您的应用程序更大，没有好的理由。有关更多信息，请参见https://s-c.sh/2BAXzed。

Answer 1

我也面临着同样的问题，我解决了这个问题，我把我所有的样式组件移动到远程应用程序中，并从那里公开它们。

Answer 2

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

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

而且，我以前也是lerna。它可以帮助您处理微服务的依赖关系。

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