webpack module federation 模块引入错误

webpack Module Federation 模块引入错误解决方案

在使用 webpack 的 Module Federation 插件进行微前端架构时，可能会遇到模块引入错误的问题，特别是在不同微应用之间切换时。以下是对该问题的详细分析及解决方案。

一、问题背景

容器控制台项目采用 qiankun + Module Federation 技术栈。qiankun 负责微前端拆分，Module Federation 用于模块复用。用户反馈在控制台子应用之间切换时，会出现报错导致白屏。

二、问题定位

报错代码定位：
用户进入 admin 应用后，切换到 matrix 应用时出现白屏。
报错代码位于 useLocation hook 中，useContext(context) 返回了 undefined，因此无法获取 location 的值。
源码分析：
报错代码属于 react-router 包。
useLocation hook 需要从上层组件的 context 中获取 location。
Router 组件通过 context.Provider 将 props.history 添加到 context 中。
BrowserRouter 组件初始化 history 并传递给 Router。
问题根源：
admin 应用和 matrix 应用都通过 Module Federation 共享了 react-router-dom。
在应用切换时，webpack 复用了属于 admin 应用的 BrowserRouter 组件。
但是，子组件中使用的 react-router（包含 useLocation）实际上是 matrix 应用自己的版本。
由于 react-router 并未被共享，导致 matrix 应用的子组件无法访问到 admin 应用中初始化的 context。

三、解决方案

将 react-router 也添加到共享依赖中，以确保不同应用之间可以共享同一个 react-router 实例，从而访问到相同的共享变量。

修改 package.json：
在容器平台的打包工具中，会自动将 package.json 中的 dependencies 依赖加入共享。
因此，只需将 react-router 添加到 dependencies 中即可。
重新打包并部署：
在修改完 package.json 后，重新打包应用。
部署到容器中，并测试应用切换是否还会出现白屏问题。

四、验证结果

在将 react-router 添加到共享依赖并重新打包部署后，问题消失，证明该解决方案有效。

五、总结

在使用 webpack Module Federation 进行微前端架构时，需要注意以下几点：

以上截图展示了报错代码、BrowserRouter 初始化断点和将 react-router 添加到依赖的具体操作，有助于理解和验证解决方案的正确性。

热门标签