如何在TypeScript+ESLint中解决Module Federation导入路径问题？

ESLint import/no-unresolved 错误修复 #

1. 安装ESLint Webpack解析器依赖 #

先确认已安装eslint-import-resolver-webpack，未安装则执行：

npm install eslint-import-resolver-webpack --save-dev
# 或
yarn add eslint-import-resolver-webpack -D

2. 调整ESLint配置，读取正确的Webpack配置 #

修改eslintrc.js，确保webpack解析器指向包含Module Federation配置的Webpack文件（比如webpack.common.js或webpack.dev.js），同时移除可能冲突的node resolver配置：

settings: {
  'import/resolver': {
    webpack: {
      config: './webpack.common.js', // 替换为你的实际Webpack配置路径
    },
  },
},

3. 直接在ESLint中配置模块别名（备选方案） #

若Webpack配置读取仍有问题，可直接映射远程模块到@cloudbeds/webpack-module-federation-types-plugin生成的类型文件：

settings: {
  'import/resolver': {
    alias: {
      map: [
        ['mf1/modulex', './src/types/mf1/modulex.d.ts'], // 替换为你的类型文件实际路径
        // 其他远程模块同理配置
      ],
      extensions: ['.ts', '.tsx', '.js', '.jsx'],
    },
  },
},

Jest测试模块找不到错误修复 #

Jest无法识别Module Federation的远程模块，需通过模块映射或Mock解决：

1. 在Jest配置中添加模块映射 #

修改jest.config.js，用moduleNameMapper将远程模块指向Mock文件：

module.exports = {
  // 其他配置...
  moduleNameMapper: {
    '^mf1/modulex$': '<rootDir>/__mocks__/mf1/modulex.ts',
    // 其他远程模块同理配置
  },
};

2. 创建对应的Mock文件 #

在项目根目录创建__mocks__/mf1/modulex.ts，模拟模块导出内容（根据实际模块类型调整）：

// 若为组件
export default function Modulex() {
  return null;
}

// 若为工具函数
export const someFunction = jest.fn();

3. 备选：直接指向类型文件（仅用于类型检查） #

如果不需要Mock行为，仅需让Jest识别模块类型，可映射到生成的类型文件：

moduleNameMapper: {
  '^mf1/modulex$': '<rootDir>/src/types/mf1/modulex.d.ts',
},

额外注意事项 #

• 不要在Webpack配置中给远程模块设置alias为远程URL，这会干扰Module Federation的加载逻辑，远程模块由remoteEntry处理即可。
• 确保@cloudbeds/webpack-module-federation-types-plugin生成的类型文件路径正确，ESLint和Jest均可访问。

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