webpack使用tsconfig-paths/register时报require() of ES modules不支持错误

问题根因 #

你遇到的报错是因为当前安装的tsconfig-paths v4及以上版本默认是ESM（ECMAScript 模块）格式，而你当前ts-node运行在CommonJS模式下，使用require加载ESM格式的模块就会触发语法错误，同时连带其依赖的ESM格式colorette包也无法被正常加载。你移除"require": ["tsconfig-paths/register"]配置后不会加载该包，所以webpack可以正常运行，但失去了路径别名解析能力。

可行解决方案 #

• 方案1：降级tsconfig-paths到v3.x版本（改动量最小）
  v3版本的tsconfig-paths是CommonJS格式，可直接被require加载，无需修改其他配置，执行以下命令安装即可：

npm install -D tsconfig-paths@3

安装完成后保留原来的ts-node配置即可同时支持路径别名解析和webpack正常运行。

• 方案2：改用webpack原生别名配置
  直接在webpack.config.ts的resolve.alias字段中配置和tsconfig.paths完全对应的别名规则，不需要依赖tsconfig-paths解析，示例如下：

import path from 'path';

export default {
  // 其他webpack配置
  resolve: {
    alias: {
      // 对应tsconfig里的@/*映射到src/*，可根据你实际的paths规则调整
      '@': path.resolve(__dirname, 'src')
    }
  }
}

配置完成后即可删除ts-node中的"require": ["tsconfig-paths/register"]配置，webpack可直接识别别名，不会触发模块格式冲突。

• 方案3：切换ts-node到ESM运行模式
  如果要使用最新版tsconfig-paths，可调整配置适配ESM模式：

1. 在package.json中恢复"type": "module"配置
2. 修改tsconfig.json中的ts-node配置如下：

{
  "ts-node": {
    "esm": true,
    "loader": ["tsconfig-paths/esm"],
    "compilerOptions": {
      "sourceMap": false,
      "module": "ESNext"
    }
  }
}

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