Module Federation远程模块导入失败：找不到'MicroApp/App'模块

针对你遇到的「Cannot find module 'MicroApp/App' or its corresponding type declarations」问题，按以下步骤逐一排查：

1. 修正端口与URL配置错误 #

• 端口不匹配：你的远程应用配置的server.port是3001，但宿主应用的remotes里写的是3006，端口完全不符，直接导致宿主无法访问远程模块。
• URL格式错误：Vite Module Federation的remotes配置需要遵循远程名称@URL的格式，同时远程应用的filename是MicroApp.js，base为./，开发环境下访问路径是根目录而非/assets/。正确配置应为：

  // 宿主应用 vite.config.js
  remotes: {
    MicroApp: "MicroApp@http://localhost:3001/MicroApp.js",
  }
  

2. 修复远程应用的语法错误 #

远程应用的vite.config.js中，plugins数组存在多余逗号，会导致Vite加载插件失败：

// 错误写法
federation({...}),
,viteTsconfigPaths()

// 正确写法
federation({...}),
viteTsconfigPaths()

3. 补充TypeScript类型声明 #

TypeScript无法自动识别联邦模块的类型，需在宿主应用中创建类型声明文件（如src/declarations.d.ts）：

declare module 'MicroApp/App' {
  import type React from 'react';
  const App: React.FC;
  export default App;
}

确保tsconfig.json的include数组包含该文件路径，比如：

{
  "include": ["src/**/*", "src/declarations.d.ts"]
}

4. 调整Vite插件加载顺序 #

@originjs/vite-plugin-federation插件需要在框架插件（如react()）之前加载，否则无法正确处理模块联邦逻辑：

• 远程应用插件顺序：

  plugins: [
    federation({...}),
    react(),
    viteTsconfigPaths()
  ]
  

• 宿主应用插件顺序：

  plugins: [
    federation({...}),
    react(),
    svgr(),
    // 其他插件...
  ]
  

5. 验证远程联邦模块的可用性 #

访问远程应用的联邦文件URL（http://localhost:3001/MicroApp.js），确认返回的是有效JS代码，且包含exposes的模块信息。如果返回404，说明远程应用的联邦文件未正确生成。

6. 区分开发/生产环境路径 #

• 开发环境：确保远程应用已启动（npm run dev），remotes指向开发服务地址。
• 生产环境：确认远程应用的build产物已部署到正确路径，remotes对应部署后的URL。

内容的提问来源于stack exchange，提问作者Brock Shar