Node12/next9 SyntaxError: Cannot use import statement outside a module
Node12/next9 SyntaxError: Cannot use import statement outside a module
我已经尝试 运行 调试模式下的项目很长时间了,但出现导入错误,我已经研究了很多关于这个问题的信息,并决定继续前进设置巴别塔。事实上,这个项目正在运行,一切都开始正常,但现在我升级了节点 10> 12 的版本,下一个 8> 9,经历了所有打字稿错误,能够构建构建并尝试 运行它在本地,但出现导入错误
项目:下一个 v9,节点 v12
// package.json(快捷键):
{
"name": "mysite",
"version": "1.0.0",
"main": "index.js",
"description": "some",
"private": true,
"scripts": {
"dev": "nodemon server/server.ts"
},
"dependencies": {
...
"express": "^4.16.3",
"node-sass": "^4.9.3",
"next": "9.2.2",
"react": "^16.8.4",
...
},
"devDependencies": {
"@babel/plugin-proposal-decorators": "^7.1.0",
"@types/body-parser": "^1.17.0",
"@types/connect-mongo": "^0.0.38",
"@types/cookie-parser": "^1.4.1",
"@types/debug": "^4.1.0",
"@types/express": "^4.16.0",
"@types/express-session": "^1.15.10",
"@types/mongodb": "^3.1.4",
"@types/mongoose": "^5.2.6",
"@types/multer": "^1.3.7",
"@types/node": "^10.7.1",
"@types/passport": "^0.4.6",
"@types/passport-local": "^1.0.33",
"@types/react": "^16.4.11",
"@types/react-dom": "^16.0.7",
"@types/redux-form": "^7.4.7",
"@types/set-value": "^2.0.0",
"@types/shortid": "^0.0.29",
"autoprefixer": "^9.4.3",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-node": "^0.0.1-security",
"babel-plugin-import": "^1.13.3",
"babel-plugin-module-resolver": "^4.1.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-plugin-wrap-in-js": "^1.1.1",
"babel-preset-env": "^1.7.0",
"css-purify-webpack-loader": "^1.0.1",
"eslint": "^5.4.0",
"eslint-plugin-react": "^7.11.1",
"faker": "^4.1.0",
"next-purgecss": "^3.0.1",
"next-size": "^2.0.2",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"purgecss-whitelister": "^2.3.1",
"stylelint-config-recommended": "^2.1.0",
"tailwindcss": "^0.7.4",
"ts-node": "^7.0.1",
"typescript": "^3.0.1",
"webpack-pwa-manifest": "^4.0.0"
}
}
// server.ts:
import bodyParser from 'body-parser';
... // other lib imports, config imports, middlevare, routes
import middlewareOAuth from './middlewareOAuth';
...
import authRoute from './routes/auth';
...
const app = next({ dev: config.dev });
app.prepare()
.then(() => {
const server = express();
...
server.use() // connecting middleware, passports, routes and others
// babel.rc
{
"plugins": [
[
"module-resolver",
{
"root": ["."],
"alias": {
"app": "./app",
"pages": "./pages",
"server": "./server",
"styles": "./styles",
"wavesurfer.js": "./wavesurfer.js"
},
"extensions": [ ".wasm", ".mjs", ".js", ".jsx", ".json", ".ts", ".tsx" ],
"cwd": "babelrc"
}
],
["@babel/plugin-proposal-decorators", { "legacy": true }],
"transform-class-properties",
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
],
"presets": [
["next/babel",
{
"preset-env": { "targets": { "node": "current" } }
}
]
],
"ignore": []
}
当我在控制台中使用 yarn dev 命令时:
$ nodemon server/server.ts
[nodemon] 2.0.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): server/**/*.ts
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node --compiler-options '{"module":"commonjs"}' server/server.ts`
[nodemon] app crashed - waiting for file changes before starting...
当我想查看发生了何种错误时,我使用命令:ts-node server/server.ts 并得到一个错误 =>
/home/roma/project/mysite/server/server.ts:1
import bodyParser from 'body-parser';
^^^^^^
SyntaxError: Cannot use import statement outside a module
我错过了什么或没有做什么?谢谢!
Adding "type": "module" to package.json will tell Node you are using ES2015 modules, which should get rid of the error, but then you will need to tell Typescript to generate this type of module by setting "module": "es2015" instead of "commonjs" in tsconfig.json.
回答于:
我已经尝试 运行 调试模式下的项目很长时间了,但出现导入错误,我已经研究了很多关于这个问题的信息,并决定继续前进设置巴别塔。事实上,这个项目正在运行,一切都开始正常,但现在我升级了节点 10> 12 的版本,下一个 8> 9,经历了所有打字稿错误,能够构建构建并尝试 运行它在本地,但出现导入错误
项目:下一个 v9,节点 v12
// package.json(快捷键):
{
"name": "mysite",
"version": "1.0.0",
"main": "index.js",
"description": "some",
"private": true,
"scripts": {
"dev": "nodemon server/server.ts"
},
"dependencies": {
...
"express": "^4.16.3",
"node-sass": "^4.9.3",
"next": "9.2.2",
"react": "^16.8.4",
...
},
"devDependencies": {
"@babel/plugin-proposal-decorators": "^7.1.0",
"@types/body-parser": "^1.17.0",
"@types/connect-mongo": "^0.0.38",
"@types/cookie-parser": "^1.4.1",
"@types/debug": "^4.1.0",
"@types/express": "^4.16.0",
"@types/express-session": "^1.15.10",
"@types/mongodb": "^3.1.4",
"@types/mongoose": "^5.2.6",
"@types/multer": "^1.3.7",
"@types/node": "^10.7.1",
"@types/passport": "^0.4.6",
"@types/passport-local": "^1.0.33",
"@types/react": "^16.4.11",
"@types/react-dom": "^16.0.7",
"@types/redux-form": "^7.4.7",
"@types/set-value": "^2.0.0",
"@types/shortid": "^0.0.29",
"autoprefixer": "^9.4.3",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-node": "^0.0.1-security",
"babel-plugin-import": "^1.13.3",
"babel-plugin-module-resolver": "^4.1.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-plugin-wrap-in-js": "^1.1.1",
"babel-preset-env": "^1.7.0",
"css-purify-webpack-loader": "^1.0.1",
"eslint": "^5.4.0",
"eslint-plugin-react": "^7.11.1",
"faker": "^4.1.0",
"next-purgecss": "^3.0.1",
"next-size": "^2.0.2",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"purgecss-whitelister": "^2.3.1",
"stylelint-config-recommended": "^2.1.0",
"tailwindcss": "^0.7.4",
"ts-node": "^7.0.1",
"typescript": "^3.0.1",
"webpack-pwa-manifest": "^4.0.0"
}
}
// server.ts:
import bodyParser from 'body-parser';
... // other lib imports, config imports, middlevare, routes
import middlewareOAuth from './middlewareOAuth';
...
import authRoute from './routes/auth';
...
const app = next({ dev: config.dev });
app.prepare()
.then(() => {
const server = express();
...
server.use() // connecting middleware, passports, routes and others
// babel.rc
{
"plugins": [
[
"module-resolver",
{
"root": ["."],
"alias": {
"app": "./app",
"pages": "./pages",
"server": "./server",
"styles": "./styles",
"wavesurfer.js": "./wavesurfer.js"
},
"extensions": [ ".wasm", ".mjs", ".js", ".jsx", ".json", ".ts", ".tsx" ],
"cwd": "babelrc"
}
],
["@babel/plugin-proposal-decorators", { "legacy": true }],
"transform-class-properties",
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
],
"presets": [
["next/babel",
{
"preset-env": { "targets": { "node": "current" } }
}
]
],
"ignore": []
}
当我在控制台中使用 yarn dev 命令时:
$ nodemon server/server.ts
[nodemon] 2.0.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): server/**/*.ts
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node --compiler-options '{"module":"commonjs"}' server/server.ts`
[nodemon] app crashed - waiting for file changes before starting...
当我想查看发生了何种错误时,我使用命令:ts-node server/server.ts 并得到一个错误 =>
/home/roma/project/mysite/server/server.ts:1
import bodyParser from 'body-parser';
^^^^^^
SyntaxError: Cannot use import statement outside a module
我错过了什么或没有做什么?谢谢!
Adding "type": "module" to package.json will tell Node you are using ES2015 modules, which should get rid of the error, but then you will need to tell Typescript to generate this type of module by setting "module": "es2015" instead of "commonjs" in tsconfig.json.
回答于: