Node12/next9 SyntaxError：无法在模块外使用导入语句

Posted 2023-03-08

【中文标题】Node12/next9 SyntaxError：无法在模块外使用导入语句

【英文标题】：Node12/next9 SyntaxError: Cannot use import statement outside a module

【发布时间】：2021-10-02 02:37:35

【问题描述】：

我已经尝试在调试模式下运行一个项目很长时间了，我得到一个导入错误，我已经研究了很多关于这个问题的信息，并决定沿着设置 babel 的路径前进。事实是这个项目正在运行，一切都开始正常，但现在我升级了节点 10> 12，下一个 8> 9 的版本，经历了所有打字稿错误，能够构建构建并尝试在本地运行它，但是导入错误

项目：next 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】：

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

回答：https://***.com/a/60225870/16471349