module federation 不是自动互通的魔法开关，而是需 host 与 remote 协同配置的运行时加载机制：remote 通过 exposes 暴露模块，host 通过 remotes 声明地址并导入；双方 name 必须唯一，shared 依赖（如 react/react-dom）须显式配置 singleton: true 且 eager: true，remoteentry.js 路径需可访问且 cors 开放，组件导出与消费须符合 react 运行时规范。
Module Federation 不是“自动互通”的魔法开关，而是需要宿主与远程双方协同配置的运行时加载机制。它让独立部署的应用能按需加载彼此暴露的组件和共享依赖，但关键在配置细节是否对齐。
明确角色分工：Host 与 Remote 各司其职
一个应用不能同时“既消费又提供”而不做区分——必须明确定义谁是 Host（主容器），谁是 Remote（被加载方）。
- Remote 应用需配置 exposes，声明哪些模块可被外部使用，例如：
./Button→./src/components/Button.jsx - Host 应用需在 remotes 中写明远程应用的唯一 name 和其
remoteEntry.js地址，格式为remoteName@http://host:port/remoteEntry.js - 双方 name 字段必须唯一且不重复；若 Host 的 name 是
mainApp，Remote 的 name 就不能也叫mainApp，否则运行时注册冲突
共享依赖必须显式声明且策略一致
React、React DOM 等核心库若未正确共享，会直接触发 Invalid hook call 或上下文丢失。shared 配置不是“写个名字就行”，而要控制版本、加载时机和实例唯一性。
-
react 和 react-dom 必须成对设置
singleton: true且eager: true，确保它们在应用启动时就加载并全局唯一 -
requiredVersion是硬性约束，不是语义化范围；例如设为'^18.2.0'，但本地node_modules实际装的是18.1.0，Webpack 就会降级使用本地副本，导致双 React 实例 - 工具类库如
lodash-es可设singleton: false，但要注意命名空间是否安全——只要都用import { debounce } from 'lodash-es'就没问题；若某方做了export * as Lodash from 'lodash-es'，就可能覆盖全局导出
确保 remoteEntry.js 可访问且路径准确
Host 加载失败，90% 源于 remoteEntry.js 获取环节卡住，而非代码逻辑问题。
- Remote 服务必须开启 CORS，否则浏览器直接拦截请求，控制台报
Cross-Origin Request Blocked - 检查
http://localhost:3002/remoteEntry.js是否真能返回 JS 文件（HTTP 200 + Content-Type: application/javascript），而不是 404 或 HTML 页面 - Remote 的
filename: 'remoteEntry.js'对应构建后输出路径，需确认静态资源托管位置（如 Nginx 的 root 或 Vite 的 base）是否匹配 URL 路径
远程组件导入要符合 React 运行时规范
即使 remoteEntry 加载成功，组件仍可能报 type is invalid，常见原因是导出或消费方式不合规。
- Remote 导出必须是具名或默认函数组件，不能包裹在异步逻辑里（比如
const Button = () => import('./Button')是错的） - Host 端导入后，需确保组件运行环境具备必要上下文，例如远程组件用了
useRouter，但 Host 没提供RouterProvider，就会崩溃 - 推荐在 Remote 中将组件包装一层轻量 Provider（如最小化的
RouterProvider或QueryClientProvider），或约定 Host 统一注入基础 Context
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
