Node12/next9 SyntaxError: 不能在模块外使用 import 语句

时间:2021-07-26 05:55:18

标签: node.js next.js babeljs nodemon

我尝试在调试模式下运行一个项目已经很长时间了,我得到了一个导入错误,我已经研究了很多关于这个问题的信息,并决定沿着设置 babel 的路径前进。事实是这个项目正在运行,一切都开始正常,但是现在我升级了 node 10> 12, next 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

我错过了什么或没有做什么?谢谢!

1 个答案:

答案 0 :(得分:1)

<块引用>

Adding "type": "module" to package.json 会告诉 Node 你正在使用 ES2015 模块,这应该会消除错误,但是你需要告诉 Typescript 通过设置 "module": "es2015" 而不是生成这种类型的模块tsconfig.json 中的“commonjs”。

回答:https://stackoverflow.com/a/60225870/16471349