nextjs 12：错误 [ERR_REQUIRE_ESM]：必须使用 import 加载 ES 模块

Question

custom-server-typescript尝试使用 example和 package安装 nextjs "type": "module"。

当我运行时ts-node --project tsconfig.server.json server/index.ts，出现以下错误

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for D:\projects\trpgline-room3\server\index.ts

这是我的设置 ts-node: 10.4.0 node: v16.13.1 npm: 8.3.0 nextjs: 12.0.7

这是我的tsconfig.server.json设置

{
  "extends": "./tsconfig.json",
  "include": ["server/**/*.ts"]
}

这是我的tsconfig.json内容

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "ES2020",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules","dist", ".next", "out", "next.config.js"]
}

我不明白为什么ts-node无法识别本地的 ts 文件？10.0.0 不应该已经支持了吗？

---

我在网上做了一些研究，发现了另一个命令node --loader ts-node/esm server/index.ts，它这次加载了 ts 文件，但后来它显示了 nextjs 错误

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: D:\projects\trpgline-room3\.next\server\pages\_document.js
require() of ES modules is not supported.
require() of D:\projects\trpgline-room3\.next\server\pages\_document.js from D:\projects\trpgline-room3\node_modules\next\dist\server\require.js is an ES module file as it is a .js file whose nearest parent package.json contains
"type": "module" which defines all .js files in that package scope as ES modules.
Instead change the requiring code to use import(), or remove "type": "module" from D:\projects\trpgline-room3\package.json.

at createErrRequireEsm (D:\projects\trpgline-room3\node_modules\ts-node\dist-raw\node-cjs-loader-utils.js:97:15)
at assertScriptCanLoadAsCJSImpl (D:\projects\trpgline-room3\node_modules\ts-node\dist-raw\node-cjs-loader-utils.js:30:11)
at Object.require.extensions.<computed> [as .js] (D:\projects\trpgline-room3\node_modules\ts-node\src\index.ts:1363:5)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.requirePage (D:\projects\trpgline-room3\node_modules\next\server\require.ts:71:10)
at Object.loadComponents (D:\projects\trpgline-room3\node_modules\next\server\load-components.ts:6:40)
at DevServer.findPageComponents (D:\projects\trpgline-room3\node_modules\next\server\next-server.ts:66:51) {
code: 'ERR_REQUIRE_ESM'

从nextjs 12开始，nextjs默认支持ESM，但仍然使用require而不是import.

有什么解决办法吗？