Programmatic Webpack+Jest(ESM)环境下无.js后缀模块无法解析问题

• 调整Webpack ESM导入严格校验配置
  你遇到的报错是Webpack 5默认对符合ESM规范的模块要求导入路径必须携带完整后缀，可在Webpack配置的resolve字段下添加fullySpecified: false关闭严格后缀校验，允许Webpack自动匹配extensions列表中的后缀补全路径。
  修改后的resolve配置示例：

resolve: {
  fullySpecified: false, // 新增这一行
  extensions: [
    '.ts',
    '.tsx',
    '.js',
    '.jsx',
    '.ttf',
    '.eot',
    '.otf',
    '.svg',
    '.png',
    '.woff',
    '.woff2',
    '.css',
    '.scss',
    '.sass',
  ],
}

• 修正Babel配置的错误参数
  你当前的Babel配置中corejs的版本号多了多余的逗号，会导致依赖解析异常，把corejs: '3.0.0,'修改为corejs: '3.0.0'即可。

• 匹配TypeScript ESM编译规则
  在项目的tsconfig.json中添加/修改以下配置，保证TS编译后的导入路径符合ESM规范：

{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

如果你的导入语句用的是.ts后缀，可新增allowImportingTsExtensions: true配置允许直接导入TS文件。

• 调整Jest测试环境的ESM适配
  由于你是在Jest测试中编程式调用Webpack，需要在jest.config.js中添加以下配置适配ESM包解析：

export default {
  transformIgnorePatterns: [
    // 替换为你用到的带"type": "module"的报错模块名，避免Jest默认不转换第三方ESM包
    "node_modules/(?!(你的报错模块名)/)"
  ],
  extensionsToTreatAsEsm: ['.ts', '.tsx', '.jsx'],
}

如果以上配置都修改完成后仍然报错，可以尝试在编程式调用Webpack时，手动指定context参数为项目根目录，保证模块解析的根路径正确。

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