Webpack5升级后依赖加载UMD而非ESM版本引发报错的原因排查

该问题由Webpack 5的模块解析默认规则变更导致，和给出的tsconfig配置无直接关联：

• Webpack v4默认的依赖入口解析优先级为module > browser > main，会优先读取依赖包package.json中指向ESM版本产物的module字段，因此升级前正常加载esm版本依赖
• Webpack v5将默认解析优先级调整为browser > module > main，会优先命中部分依赖指向UMD版本的browser字段；而多数Angular生态依赖的UMD产物是经过编译的IIFE格式，Webpack 5无法对这类格式做静态导出分析，无法识别其中的具名导出项，就会抛出Failed to find exported name of node构建错误。

在Webpack 5配置中手动将resolve.mainFields的解析顺序改回Webpack 4的默认规则即可：

// webpack.config.js 配置片段
module.exports = {
  // 其余原有配置保持不变
  resolve: {
    // 优先匹配ESM入口，回退顺序和Webpack4保持一致
    mainFields: ['module', 'browser', 'main'],
    // 原有resolve下的extensions、alias等配置保留即可
  }
}

如果调整后仍有个别依赖命中UMD版本，可以通过alias强制指定对应依赖的ESM入口路径，例：

resolve: {
  mainFields: ['module', 'browser', 'main'],
  alias: {
    // 示例：强制对应依赖走ESM入口，按需替换成实际出问题的包即可
    '@angular/cdk': '@angular/cdk/esm2015/index.js'
  }
}

• 现有tsconfig中module: "esnext"的配置是正确的，无需修改，该配置仅控制TypeScript自身编译输出的模块格式，不影响Webpack对node_modules下第三方依赖的入口解析逻辑
• tsconfig中enableIvy: false的配置和该问题无关，模块入口解析是Webpack构建层逻辑，和Angular模板编译器的运行规则互不影响
• 不要通过关闭Webpack 5的静态导出分析能力绕过报错，会导致tree-shaking完全失效，大幅增加构建产物体积，还可能引入其他隐式依赖问题

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