NX项目执行nx serve api时ES模块加载错误求助

编译过了但运行时炸锅？本质是TS输出的ES模块（用import）和Node.js默认的CommonJS解析规则不兼容，按下面的步骤调就行：

1. 给package.json加模块类型标记 #

不管是根目录还是api子项目的package.json，直接加一行：

{
  "type": "module"
}

monorepo优先给api子项目单独加，别影响其他用CommonJS的项目。

2. 修正TS配置的模块输出规则 #

打开api子项目的tsconfig.app.json，把这俩配置改对：

{
  "compilerOptions": {
    "module": "ESNext", // 编译成ES模块
    "moduleResolution": "NodeNext", // 按Node.js的模块规则解析
    "target": "ES2020", // 目标ES版本别太低
    // 其他原有配置不动
  }
}

如果根目录的tsconfig.base.json里有module配置，别让它覆盖子项目的，子项目的tsconfig.app.json优先级更高。

3. 调整NX的serve执行配置 #

打开api子项目的project.json，改serve目标的配置：

• 要是用@nx/node:node执行器，加个runtime参数（旧Node版本需要，16.10+可以不用）：

{
  "targets": {
    "serve": {
      "executor": "@nx/node:node",
      "options": {
        "buildTarget": "api:build",
        "runtimeArgs": ["--experimental-specifier-resolution=node"]
      }
    }
  }
}

• 要是用ts-node运行，必须指定ES模块加载器：

{
  "targets": {
    "serve": {
      "executor": "@nx/js:node",
      "options": {
        "program": "apps/api/src/main.ts",
        "tsConfig": "apps/api/tsconfig.app.json",
        "runtimeArgs": ["--loader", "ts-node/esm"]
      }
    }
  }
}

4. 处理第三方依赖的兼容性 #

有些老依赖只支持CommonJS，在tsconfig.app.json里加这俩配置让TS自动兼容：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

5. 确认Node.js版本 #

别用太老的Node，至少14.13.0以上，推荐16.x或更高，原生支持ES模块，少踩坑。

最后验证一下：删了dist目录重新nx build api，看输出文件里是import不是require，再跑nx serve api应该就正常了。

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