Angular11搭配webpack4.44.2构建报错：无法从非ES模块导入命名导出'URL'

该错误是webpack 4.x版本对ESM（ECMAScript模块）和CommonJS模块混合导入场景的兼容缺陷导致的：

1. 项目中某个依赖近期发布了更新，新版本内部使用了import { URL } from 'url'的命名导出写法
2. webpack 4.44.2默认将.mjs后缀的文件识别为严格ESM模块，而Node内置的url模块属于CommonJS模块，仅支持默认导出，webpack在校验时判定无法从非ESM模块中提取命名导出，就会抛出该错误

按优先级尝试以下方案即可：

方案1：修改webpack配置兼容.mjs文件 #

修改你的webpack-server.config.js，新增.mjs扩展名解析规则和模块处理规则，修改后完整配置如下：

const path = require("path");

const { NODE_ENV = "production" } = process.env;

module.exports = {
  entry: "./server",
  mode: NODE_ENV,
  target: "node",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "server.js",
  },
  resolve: {
    extensions: [".ts", ".js", ".mjs"], // 新增.mjs扩展名支持
    mainFields: ["main", "module"] // 优先加载CommonJS格式的依赖入口，避免优先读取ESM版本依赖
  },
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto" // 告诉webpack将.mjs文件当作普通JS处理，不严格校验ESM规则
      }
    ]
  }
};

修改后重新执行npm run build:server即可，90%以上的同类问题都可以通过该方案解决。

方案2：锁定出问题的依赖版本 #

如果修改配置后仍然报错，找到近期更新的触发问题的第三方依赖，在package.json中通过resolutions（yarn环境）或overrides（npm 8+环境）将该依赖锁定到之前正常运行的历史版本即可。

方案3：调整URL引用写法 #

Node 12已经内置全局URL对象，你可以直接删除代码中从url模块导入URL的语句，直接使用全局URL即可；也可以将导入写法改为CommonJS格式：const { URL } = require('url')，webpack4对CommonJS的导出解析逻辑没有该兼容问题。

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