导入不适用于“模块":"ESNEXT"在tsconfig.json中 [英] import doesn't work with "module": "ESNEXT" in tsconfig.json
问题描述
我在服务器端有以下代码:
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;
}
}
VSCODE编译器在上述代码上未显示任何错误.但是，当我运行它时，它显示以下错误:
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
当在tsconfig.json中将模块设置为commonJS时，它运行良好.
It worked well when module was set to commonJS in tsconfig.json.
但是由于某些原因，我需要使用ESNEXT进行模块设置.
But for some reason, I need to use ESNEXT for module setting.
这是我的tsconfig.json:
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"
]
}
我该如何解决?
-----------添加了-------------
----------- 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"
}
推荐答案
在这种情况下，似乎显示错误是因为所使用的 ts-node 版本不支持ES Module语法，正在此处进行讨论.我从该票证中发现 ts-node v8.10.0 提供了实验性支持，因此也许对其进行更新将使其起作用.我不知道其他任何解决方案，但是您应该能够通过将 .ts 编译为 .js 并使用 node 而不是 ts-node .否则让我知道，我很乐于进一步挖掘.
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.
这篇关于导入不适用于“模块":"ESNEXT"在tsconfig.json中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
