Webpack 5模块联盟微前端和react redux不工作

Question

尝试将现有的react+redux应用程序迁移到micro前端。

Container (Parent App) - localhost:8080
ReactReduxApp (Child App - 1) - localhost:8081
ReactApp (Child App - 2) - localhost:8082

独立应用程序可以在其PORT中使用react redux运行。当作为容器应用程序中的子应用程序访问它时，容器应用程序不会加载并抛出ERROR 以下

Error: Could not find "store" in the context of "Connect(IndexPage)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(IndexPage) in connect options.

没有ReactReduxApp(Child1(我的Container(Parent(app在使用ReactApp(Child2(1时运行良好

Answer 1

解决方案

对每个使用React Context:的共享库使用singleton: true

// webpack.config.js
// import package.json to get packages' versions
const deps = require('./package.json').dependencies
module.exports = {
// ...
plugins: [
new ModuleFederationPlugin({
name: 'main',
filename: 'remoteEntry.js',
remotes: {
// your remotes config
},
shared: {
react: {
singleton: true,
version: deps['react']
},
'react-dom': {
singleton: true,
version: deps['react-dom']
},
'react-router-dom': {
singleton: true,
version: deps['react-router-dom']
},
'react-redux': {
singleton: true,
version: deps['react-router-dom']
}
},
}),
// other plugins
]

在所有联邦模块中使用此设置。

自定义上下文解决方案

如果你的应用程序有自定义上下文，也有类似的解决方案。看看模块联邦示例monoreo中的示例。

解释

当你的应用程序中有两个React Context副本时，就会出现这样的错误。Redux、React Router、Material UI和其他库在其提供商内部使用Context API。因此，例如，当您在两个WP5联合模块中导入Redux时，每个模块(或应用程序(都有自己的Redux副本，即使它是相同版本的。

变通办法

如果由于某种原因，您无法使用singleton模块，那么有一个解决方法：将您的Redux存储传递给远程应用程序的道具，并用另一个提供者将其包装起来，如下所示：

// in your remote app:
const RemoteAppWrapper = ({ store }) => {
return (
<Provider store={store}>
<RemoteApp />
</Provider>
);
};
// and then in your host app:
<RemoteApp store={store} />

有一个应用程序在官方模块联合示例monorepo中有一个完整的示例，其中使用了这种方法：https://github.com/module-federation/module-federation-examples/tree/master/redux-reducer-injection

Answer 2

也许你应该试试这个redux微型前端，而不是原始redux