vite-plugin-federation报错：找不到'remoteApp/Logo'模块及类型声明

1. 补充TypeScript类型声明 #

Vite模块联邦不会自动生成远程模块的TypeScript类型，这是导致Header组件报错的核心原因。在宿主项目中添加类型声明文件：

• 在src目录下创建types/remoteApp.d.ts，写入：

declare module 'remoteApp/Logo' {
  import type { FC } from 'react';
  const Logo: FC;
  export default Logo;
}

• 修改tsconfig.json的include字段，确保类型文件被识别：

{
  "include": ["src/**/*", "src/types/**/*"]
}

2. 校验Header组件的导入细节 #

• 确认Header组件内的导入语句与App.tsx完全一致：import Logo from 'remoteApp/Logo';，注意大小写严格匹配（需与宿主vite配置中remotes的键remoteApp完全一致）。
• 检查Header组件文件是否在src目录下，且未被tsconfig.json的exclude字段排除。

3. 清除缓存并重启服务 #

Vite的缓存可能导致模块解析异常，执行以下步骤：

• 关闭宿主和远程应用的开发服务
• 删除两个项目下的node_modules/.vite目录
• 重新启动两个应用的开发服务

4. 确认远程Logo组件的导出方式 #

检查远程项目src/components/Logo/Logo.tsx的导出逻辑：

• 如果是默认导出（如下），宿主的导入方式正确：

const Logo = () => {
  return <svg>{/* SVG内容 */}</svg>;
};

export default Logo;

• 如果是命名导出，需同步修改宿主的导入语句为import { Logo } from 'remoteApp/Logo';，并更新类型声明文件。

5. 验证远程服务的可用性 #

• 确认远程应用已启动在localhost:5001端口，浏览器访问http://localhost:5001/assets/remoteEntry.js能正常加载文件内容。
• 核对远程应用vite配置中exposes的./Logo路径是否指向正确的组件文件。

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