ERR_REQUIRE_ESM与ERR_UNKNOWN_FILE_EXTENSION报错排查求助

问题根源 #

你遇到的是CommonJS（CJS）与ECMAScript模块（ESM）的兼容性冲突：

1. 初始用commonjs模块编译时，CJS代码无法直接require()纯ESM模块（比如svgdom），触发ERR_REQUIRE_ESM。
2. 切换module为esnext后，Node将项目识别为ESM，但ts-node未正确适配ESM模式的.ts文件处理逻辑，导致ERR_UNKNOWN_FILE_EXTENSION。

解决方案一：在CJS环境下兼容ESM模块（无需全局切换） #

如果不想改动整个项目的模块系统，只需针对ESM模块做局部适配：

• 将静态require()替换为动态import()，这是Node允许CJS模块加载ESM的官方方式。
• 示例修改（对应报错的shop.ts文件）：

  // 原错误代码
  // const svgdom = require('svgdom');
  
  // 修改为（需包裹在async函数内）
  async function yourBusinessLogic() {
    const { default: svgdom } = await import('svgdom');
    // 后续使用svgdom的逻辑
  }
  

• 注意：动态import()返回Promise，必须用await处理，因此需要放在async函数中执行。

解决方案二：全局切换为ESM模式（彻底解决兼容性） #

如果希望项目完全适配ESM生态，需同步修改以下配置：

1. 更新package.json #

添加"type": "module"，告诉Node将项目内的.js文件默认视为ESM：

{
  "type": "module",
  // 其他原有配置...
}

2. 修改tsconfig.json #

调整模块相关配置，适配ESM解析逻辑：

{
  "compilerOptions": {
    "target": "es6",
    "module": "ESNext",          // 编译输出ESM模块
    "moduleResolution": "NodeNext", // 匹配Node的ESM解析规则
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true // 兼容第三方包的默认导入语法
  },
  "include": ["src"],
  "ts-node": {
    "esm": true // 强制ts-node启用ESM支持
  }
}

3. 调整启动命令 #

使用ts-node的ESM模式启动项目：

ts-node --esm src/main.ts

如果用nodemon热重载，需补充参数：

nodemon --exec ts-node --esm src/main.ts

4. 统一代码语法 #

将项目中所有CJS语法替换为ESM规范：

• 替换require()为import语句
• 替换module.exports/exports为export/export default

额外注意事项 #

• 若删除svgdom后仍报错，说明还有其他依赖是纯ESM模块，需按上述方案统一处理。
• 确保ts-node版本≥10.0.0，低版本对ESM的支持存在缺陷。

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