导入不适用于 tsconfig.json 中的“模块”：“ESNEXT”

Question

I have following code on server side:

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;
  }
}

The VSCODE compiler doesn't show any error on above code. However, when I run it, It shows following error:

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

SyntaxError: Cannot use import statement outside a module

It worked well when module was set to commonJS in tsconfig.json.

But for some reason, I need to use ESNEXT for module setting.

Here is my 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"
  ]
}

How do I solve this?

----------- added -------------

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

It seems in this case the error shows because the version of ts-node being used does not support ES Module syntax, as is being discussed here . I found out from that ticket that ts-node v8.10.0 provides experimental support , so maybe updating it will get this working. I don't know of any other solutions, but you should be able to run the files by compiling the .ts to .js and run them with node instead of ts-node . Let me know otherwise, I'm happy to dig a little further.

Answer 2

This worked for me. Try running

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