импорт не работает с «модулем»: «ESNEXT» в tsconfig. json - PullRequest
2 голосов
/ 03 мая 2020

У меня следующий код на стороне сервера:

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

Это работало хорошо, когда для модуля был установлен общий JS в tsconfig. json.

Но по какой-то причине мне нужно использовать 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"
  ]
}

Как мне решить эту проблему?

----------- добавлено -------------

пакет. 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"
}

1 Ответ

1 голос
/ 04 мая 2020

Кажется, что в этом случае появляется ошибка, потому что используемая версия ts-node не поддерживает синтаксис модуля ES, как обсуждается здесь . Из этого тикета я узнал, что ts-node v8.10.0 обеспечивает экспериментальная поддержка , поэтому, возможно, его обновление заработает. Я не знаю других решений, но вы сможете запустить файлы, скомпилировав .ts в .js и запустив их с node вместо ts-node. Дайте мне знать иначе, я с удовольствием покопаюсь немного дальше.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...