使用Vite/React/TypeScript搭建微前端Module Federation时找不到模块

问题分析 #

你遇到的TS2307: Cannot find module 'remote/Button'错误，主要来自两个方面：

1. 远程应用的Vite配置存在缺失项，可能导致模块加载异常
2. TypeScript无法识别远程模块的类型，需要手动添加类型声明

解决方案 #

1. 修复远程应用的vite.config.ts配置 #

远程应用的build.target配置为空，这会导致构建出的代码与宿主应用的模块格式不兼容，补全该配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'

export default defineConfig({
  build: {
    target: 'esnext' // 补全该配置，与宿主保持一致
  },
  plugins: [
    react(),
    federation({
      name: "remote",
      filename: 'remoteEntry.js',
      exposes: {
        "Button": "./src/components/Button",
      },
      shared: ["react", "react-dom"],
    })
  ],
  server: {
    port: 5001,
  },
})

2. 为宿主应用添加TypeScript类型声明 #

TypeScript默认无法识别远程模块，需要在宿主项目中创建类型声明文件，比如src/declarations.d.ts，内容如下：

// 声明remote/Button模块的类型
declare module 'remote/Button' {
  import type { ComponentType, ReactNode } from 'react';
  
  // 根据Button组件的实际props调整类型定义，这里是示例
  interface ButtonProps {
    children?: ReactNode;
    // 其他props比如disabled、onClick等可以按需添加
  }
  
  const Button: ComponentType<ButtonProps>;
  export default Button;
}

如果暂时不清楚Button的props，可以用ComponentType<any>临时替代，但建议后续补充准确的类型。

3. 确保远程应用的资源可访问 #

• 先在远程应用目录执行npm run build，再启动预览服务npm run preview（或者直接启动开发服务npm run dev，@originjs插件支持开发模式下的Module Federation）
• 在浏览器中访问http://localhost:5001/assets/remoteEntry.js，确认能正常加载该文件，否则检查远程应用的构建输出路径是否正确

4. 验证宿主应用的导入代码 #

确保宿主App.tsx中的导入语句正确：

import Button from 'remote/Button';

function App() {
  return (
    <div className="App">
      <Button>测试远程按钮</Button>
    </div>
  );
}

export default App;

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