導入不適用於 tsconfig.json 中的“模塊”：“ESNEXT”

Question

我在服務器端有以下代碼：

import * as express from "express";

export class AppRouter {
  private static instance: express.Router;

  static getInstance(): express.Router {
    if (!AppRouter.instance) {
      AppRouter.instance = express.Router();
    }

    return AppRouter.instance;
  }
}

VSCODE 編譯器在上述代碼上沒有顯示任何錯誤。 但是，當我運行它時，它顯示以下錯誤：

import * as express from "express";
^^^^^^

SyntaxError: Cannot use import statement outside a module

當模塊在 tsconfig.json 中設置為 commonJS 時，它運行良好。

但由於某種原因，我需要使用 ESNEXT 進行模塊設置。

這是我的 tsconfig.json：

{
  "compilerOptions": {
    "target": "ESNEXT",
    "module": "ESNEXT",
    "allowJs": true,
    "jsx": "react",
    "sourceMap": true,
    "outDir": "dist",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "include": [
    "src/**/*.ts", "src/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    ".vscode"
  ]
}

我該如何解決這個問題？

- - - - - - 添加 - - - - - - -

package.json：

{
  "name": "APP",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "dev": "NODE_ENV=development nodemon",
    "prod": "NODE_ENV=production ts-node ./src/server/main.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/react": "16.8.19",
    "@types/react-dom": "16.8.4",
    "@types/react-redux": "^7.0.9",
    "@types/react-router-dom": "^5.1.3",
    "@types/react-router": "^5.1.3",
    "@types/webpack-env": "^1.14.1",
    "@types/body-parser": "^1.17.0",
    "@types/express": "^4.16.1",
    "@types/node": "^12.12.21",
    "babel-core": "^6.26.3",
    "babel-preset-stage-2": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-universal-import": "^4.0.0",
    "babel-plugin-transform-async-to-promises": "^0.6.1",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-async-to-promises": "^1.0.5",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-redux": "^7.0.3",
    "react-router": "^5.0.1",
    "react-router-dom": "^5.0.1",
    "react-universal-component": "^4.0.0",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "serialize-javascript": "^2.1.0",
    "history": "^4.10.1",
    "redux-form": "^8.2.6",
    "react-helmet": "^5.2.1",
    "url-loader": "^1.0.1",
    "markdown-with-front-matter-loader": "^0.1.0",
    "iltorb": "^2.3.2",
    "front-matter-loader": "^0.2.0",
    "file-loader": "^1.1.11",
    "css-loader": "^0.28.11",
    "compression-webpack-plugin": "^1.1.11",
    "brotli-webpack-plugin": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "optimize-css-assets-webpack-plugin": "^4.0.1",
    "uglifyjs-webpack-plugin": "^1.2.5",
    "cors": "^2.7.1",
    "react-hot-loader": "^4.1.2",
    "extract-css-chunks-webpack-plugin": "^3.0.6",
    "webpack-hot-server-middleware": "^0.5.0",
    "express-static-gzip": "^0.3.2",
    "ts-loader": "^4.0.0",
    "webpack-flush-chunks": "^3.0.0-alpha.4",
    "webpack-hot-middleware": "^2.22.1",
    "webpack": "^4.8.3",
    "webpack-bundle-analyzer": "^2.11.1",
    "typescript": "^3.7.4",
    "webpack-dev-middleware": "^3.7.2",
    "ts-node": "^8.5.4",
    "express": "^4.17.1",
    "nodemon": "^1.19.4",
    "body-parser": "^1.19.0",
    "axios": "^0.16.2",
    "js-cookie": "^2.2.0",
    "react-scroll": "^1.7.14",
    "react-animate-on-scroll": "^2.1.5",
    "react-iframe": "^1.8.0",
    "react-fade-in": "^0.1.6",
    "react-loading": "^2.0.3",
    "rodal": "^1.6.3",
    "react-lottie": "^1.2.3",
    "react-google-login": "^5.0.2",
    "moment": "^2.24.0",
    "cross-fetch": "^2.1.1",
    "yaml-front-matter": "^4.0.0",
    "marked": "^0.3.19",
    "@types/cookie-session": "^2.0.37",
    "concurrently": "^4.1.0",
    "cookie-session": "^1.3.3",
    "reflect-metadata": "^0.1.13"
  },
  "devDependencies": {
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-regenerator": "^6.26.0"
  }
}

nodemon.json：

{
    "watch": [
        "src",
        "config"
    ],
    "ext": "ts tsx js",
    "exec": "ts-node ./src/server/main.ts"
}

Answer 1

在這種情況下，錯誤似乎是因為正在使用的ts-node版本不支持 ES Module 語法，正如在此處討論的那樣。 我從那張票中發現ts-node v8.10.0提供了實驗性支持，所以也許更新它會讓這個工作正常。 我不知道任何其他解決方案，但您應該能夠通過將.ts編譯為.js並使用node而不是ts-node來運行文件。 否則請告訴我，我很樂意進一步挖掘。

Answer 2

這對我有用。 嘗試運行

ts-node --transpile-only --script-mode file_name.ts