React with Webpack-5 & Module-Federation，分享@mui

Question

• 框架：react.jsv18
• 包：@mui/material v5, @emotion/react v11
• apps: theme(host), nav(remote)

remote app(nav) 有它自己的

ThemeProvider

(@mui/material) 组件，主要颜色设置为绿色(@mui/material/colors)，但它只公开一个名为“AppBar”的组件'.然而，当 host 应用程序在运行时使用它时，它仍然会加载共享组件旁边的绿色，但只是用当前应用程序的 primary 颜色覆盖它。

*注：我确实在《实用模块联合会2.0》（第45页）一书中找到了下面这段话：

当浏览器加载 remoteEntry.js 时，它会注册一个全局变量，其名称在 ModuleFederationPlugin 配置中的库键中指定。这个变量有两个东西，一个返回任何远程模块的 get 函数，以及一个管理所有共享包的覆盖函数。

我还不清楚这种绿色是如何从主题组件中“泄漏”出来的，该组件是一个单独文件中完全独立的组件，并且没有暴露在应用程序之外..

我的

webpack.config.js

文件有

shared

字段：

react

，

react-dom

和

@emotion/react

。我也尝试添加

@emotion/styled

但它没有改变任何东西。

有人熟悉这个主题吗？非常感谢您的帮助！谢谢！

Answer 1

添加你的 'webpack.config.js' 共享依赖 '@mui/system' 和 '@mui/styles' 都将单例设置为 'true'