模块联邦不是万能跨应用通信方案，本质是Webpack构建时代码分割，运行时需处理共享依赖、版本冲突与生命周期协调。
模块联邦不是万能的跨应用通信方案，它本质是 Webpack 的构建时代码分割机制，运行时仍需处理共享依赖、版本冲突和生命周期协调问题。
为什么 ModuleFederationPlugin 无法直接让两个独立部署的 React 应用“自动互通”
模块联邦依赖远程容器暴露的 remoteEntry.js 入口文件，该文件必须被正确加载且与本地 ModuleFederationPlugin 配置的 name、shared 策略匹配。常见失败场景包括：
- 远程应用未开启 CORS，导致浏览器拦截
remoteEntry.js加载 - 本地
remotes配置写成'app2@http://localhost:3002/remoteEntry.js'，但远程服务实际返回 404（路径或静态资源未正确托管） -
shared中指定react但未设singleton: true，导致两个应用各自挂载自己的 React 实例，触发 “Invalid hook call” 错误 - 远程应用使用 Webpack 5.70+，而宿主应用用的是 5.40，
shareScope协议不兼容，报错Shared module is not available for eager consumption
如何安全地在 shared 中声明第三方库
不能只写库名，必须显式控制版本策略、提升方式和作用域。例如 react 和 react-dom 必须成对处理，且需强制 singleton：
shared: {
react: { singleton: true, requiredVersion: '^18.2.0', eager: true },
'react-dom': { singleton: true, requiredVersion: '^18.2.0', eager: true },
'lodash-es': { singleton: false, requiredVersion: '^4.17.0' },
'@mui/material': { singleton: false, requiredVersion: '>=5.13.0' }
}关键点：
立即学习“前端免费学习笔记（深入）”；
-
eager: true表示该包在容器启动时就加载并注册，避免运行时动态加载失败 -
requiredVersion不是语义化通配符，而是严格匹配本地node_modules中的实际版本；若不一致，Webpack 会降级为本地副本，可能引发重复实例 -
singleton: false适用于工具类库（如lodash-es），但要注意不同应用导出的命名空间是否冲突（比如都用import { debounce } from 'lodash-es'是安全的，但若某方做了export * as Lodash from 'lodash-es'就可能覆盖）
如何从远程应用加载组件并规避 React.createElement: type is invalid
错误通常源于：远程组件被当作普通对象导入，而非 React 组件函数；或其内部依赖的上下文（如 RouterProvider、QueryClientProvider）缺失。正确做法是：
- 远程应用导出组件时，必须确保是具名导出或默认导出的函数组件，且不能包裹在异步逻辑里（如
const Comp = () => import('./Comp')不行） - 宿主应用中用
React.lazy+React.Suspense动态加载，而不是直接import()后立即调用：const RemoteButton = React.lazy(() => import('app2/Button')) - 远程组件若依赖全局 Provider，应在宿主应用中统一提供，或由远程应用自行包裹（推荐后者，通过导出一个带 Provider 的高阶组件）
- 检查远程组件的
package.json中peerDependencies是否与宿主一致，尤其react版本 —— 模块联邦不会帮你校验运行时类型兼容性
部署后 remoteEntry.js 404 或加载空白，该怎么查
这不是配置问题，是发布链路断了。优先验证三件事：
- 远程应用构建后，
dist/remoteEntry.js文件真实存在，且内容以self.__federation__开头（不是空文件或 HTML） - HTTP 服务（如 Nginx）是否将
/remoteEntry.js路径映射到对应 dist 目录，而不是 fallback 到index.html（常见于 SPA 路由配置） - 浏览器 Network 面板中查看
remoteEntry.js响应头是否有Content-Type: application/javascript；若为text/html，说明服务返回了 HTML，模块联邦脚本根本没执行 - 打开
remoteEntry.js控制台执行self.__federation__?.shareScope?.default，确认是否已注册 shared 模块 —— 如果是undefined，说明脚本加载了但没执行成功（常因语法错误或 polyfill 缺失）
模块联邦真正的复杂点不在配置，而在边界控制：谁负责状态同步、错误隔离、样式污染、路由劫持。这些都无法靠 ModuleFederationPlugin 自动解决，得靠约定和额外胶水层。很多人卡住，是因为把“能 import 组件”当成了“微前端跑通”，其实那只是第一步。
