Webpack Module Federation使用TSX导入远程组件找不到类型声明问题求助

解决方案及排查步骤 #

• 第一步：校验tsconfig的include路径正确性
  你当前配置的include路径../core/src/lib.d.ts是相对于tsconfig.json所在文件目录的相对路径，先确认该路径下的lib.d.ts文件真实存在，编译阶段可被TS读取。如果路径校验无误仍不生效，可以尝试将路径替换为绝对路径，或者在include数组中增加声明文件所在的整个目录，示例：

"include": [
  "src/**/*",
  "../core/src/**/*.d.ts"
]

• 第二步：补充缺失的远程模块声明
  你当前只声明了lib/Typography模块的类型，所以payment/RecentPayments的导入会触发类型报错，需要在声明文件中补充对应模块的类型，示例：

// 追加到lib.d.ts中
declare module "payment/RecentPayments" {
  const RecentPayments: React.ComponentType;
  export default RecentPayments;
}

如果暂时不需要精确类型，可以直接用通配符声明覆盖所有远程模块，不需要逐个编写声明，比全局加// @ts-ignore更规范：

// 放在lib.d.ts文件顶部即可
declare module 'lib/*';
declare module 'payment/*';

• 第三步：补充tsconfig路径映射配置
  在compilerOptions中增加baseUrl和paths配置，帮助TS定位远程模块的声明文件：

{
  "compilerOptions": {
    // 保留原有所有配置，新增以下内容
    "baseUrl": ".",
    "paths": {
      "lib/*": ["../core/src/*"],
      "payment/*": ["./src/remotes/payment/*"] // 替换为payment相关声明的实际存放路径
    }
  }
}

• 第四步：排查声明文件被排除的情况
  检查tsconfig中是否存在exclude字段，确认没有排除你声明文件所在的目录；如果你的tsconfig是继承自其他基础配置（如tsconfig.base.json），确认include和exclude字段没有被父配置覆盖。

• 长期优化方案
  后续可以调整远程模块暴露侧的构建逻辑，在lib和payment项目构建时自动生成对应模块的类型声明文件，统一托管到共享目录或者npm私包，消费方直接引入即可，不需要手动维护类型声明。

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