根本原因是远程应用的 remoteEntry.js 未被宿主正确加载，因 Webpack Dev Server 默认不代理远程模块入口，需手动配置 devServer.proxy 或跨域支持，并确保远程应用已启动且 publicPath 正确。
为什么本地联调总卡在 Module not found: Error: Can't resolve 'app1/Button'
根本原因不是路径写错，而是远程应用的 remoteEntry.js 没被宿主正确加载——宿主启动时，它只认本地文件系统，不会自动拉取 http://localhost:3001/remoteEntry.js。Webpack Dev Server 默认不代理远程模块入口，必须手动配置 devServer.proxy 或启用跨域支持。
- 确保远程应用（如 App1）已启动且
remoteEntry.js可访问：打开浏览器访问http://localhost:3001/remoteEntry.js，应返回 JS 内容而非 404 - 宿主应用的
webpack.config.js中，devServer需显式允许跨域：headers: { 'Access-Control-Allow-Origin': '*' } - 若用 webpack-dev-server v4+，推荐用
proxy代替 CORS：在devServer下加proxy: { '/remoteEntry.js': { target: 'http://localhost:3001', changeOrigin: true } }，然后把 remote 地址改为相对路径app1: 'app1@/remoteEntry.js'
React.lazy 动态导入报 Suspense 缺失或白屏怎么办
这不是模块联邦专属问题，但联调时高频触发：远程模块加载是异步的，宿主必须用 React.Suspense 包裹，否则会直接抛错或渲染空内容。
- 错误写法：
const RemoteButton = React.lazy(() => import('app1/Button'));后直接<RemoteButton />—— 缺少Suspense容器 - 正确写法：必须包裹
<Suspense fallback={<div>Loading...</div>}><RemoteButton /></Suspense> - 注意：如果 fallback 是空节点或 null，页面会“闪白”，建议至少给个 loading 文字或骨架占位
- Vue 用户同理：需配合
<suspense>标签，且远程组件导出必须是默认导出（export default {}），不能是命名导出
多个远程应用共用 React 时，为什么控制台警告 React version mismatch
宿主和远程各自打包了不同版本的 React，模块联邦的 shared 配置没生效。关键不在是否写了 react: { singleton: true }，而在于两端的 shared 参数是否严格一致、且加载顺序是否可控。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 两端都必须声明
react和react-dom，且singleton: true+eager: true缺一不可；eager: true确保共享依赖优先加载 - 宿主应用的
shared配置中，版本号要显式指定（如version: '18.2.0'），避免因 package.json 中 ^ 版本导致解析出不同 minor 版本 - 远程应用构建后，检查其
remoteEntry.js是否真的导出了react全局变量：在浏览器控制台执行window.app1?.__REACT_SHARE_SCOPE__?.react，应返回 React 构造函数 - 若仍失败，临时在宿主入口加
import 'react'; import 'react-dom';强制提前初始化共享 scope
VSCode 调试时断点失效，或提示 Source map not loaded
模块联邦下远程模块的 source map 默认不随 remoteEntry.js 一起加载，VSCode 无法映射原始代码行。这不是环境问题，是 Webpack 的 source map 加载策略限制。
立即学习“前端免费学习笔记（深入）”；
- 远程应用构建时，必须开启
devtool: 'source-map'（非eval-source-map），并确保output.devtoolModuleFilenameTemplate指向可访问的源码路径（如file://[absolute-path]） - 宿主应用的
devServer需启用static配置，将远程应用的src/目录作为静态资源服务：例如static: [{ directory: path.join(__dirname, '../app1/src'), publicPath: '/src' }] - 更稳妥的做法：在远程应用的
webpack.config.js中，用SourceMapDevToolPlugin单独生成外部 source map，并通过publicPath指向可被宿主访问的 URL（如http://localhost:3001/src/）
publicPath 配置。它决定所有 chunk 的加载地址，一旦设为 /，宿主从 http://localhost:3000/ 加载时，会错误请求 http://localhost:3000/static/js/xxx.js 而非 http://localhost:3001/static/js/xxx.js。务必在远程应用中显式设为 publicPath: 'http://localhost:3001/'。 
