1

我想在我的 next.js 中使用 ES 2020 的新功能，所以我在我的应用程序中使用了可选更改。当我运行我的代码时，发生了这个错误

Module parse failed: Unexpected token (50:191)
You may need an appropriate loader to handle this file type.

然后我运行了这个命令

npm install --save-dev @babel/plugin-proposal-optional-chaining

但问题仍然存在。然后我决定将 babel/core 更新到版本 7，我通过这个命令更新了它

npx babel-upgrade --write

但加载程序错误仍然存​​在，我不知道。这是我的 package.json 文件：

{
    "name": "Karan",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "dev": "SET NODE_ENV=development && SET PORT=3001 && node server.js",
        "build": "next build",
        "prod-build": "next build",
        "start": "SET NODE_ENV=production && SET PORT=8080 && node server.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "@ckeditor/ckeditor5-basic-styles": "^11.1.4",
        "@ckeditor/ckeditor5-build-classic": "^12.4.0",
        "@ckeditor/ckeditor5-font": "^11.2.2",
        "@ckeditor/ckeditor5-paragraph": "^11.0.5",
        "@ckeditor/ckeditor5-react": "^1.1.3",
        "@fullpage/react-fullpage": "^0.1.17",
        "@sentry/browser": "^4.6.6",
        "@svgr/webpack": "^4.3.2",
        "@zeit/next-css": "^1.0.1",
        "@zeit/next-stylus": "^1.0.1",
        "axios": "^0.18.1",
        "express": "^4.17.1",
        "global": "^4.4.0",
        "jalaali-js": "^1.1.0",
        "leaflet": "^1.5.1",
        "moment-jalaali": "^0.8.3",
        "moment-jalali": "^0.3.9",
        "next": "^8.1.0",
        "next-images": "^1.1.2",
        "next-routes": "^1.4.2",
        "npm": "^6.12.1",
        "numeral": "^2.0.6",
        "persianjs": "^0.4.0",
        "pm2": "^3.5.1",
        "prop-types": "^15.6.2",
        "qs": "^6.8.0",
        "react": "^16.9.0",
        "react-bootstrap-star-rating": "^3.5.5-alpha.0.3",
        "react-dom": "^16.9.0",
        "react-leaflet": "^2.4.0",
        "react-modal": "^3.9.1",
        "react-paginate": "^5.2.4",
        "react-persian-calendar": "^1.0.3",
        "react-rating": "^2.0.4",
        "react-redux": "^5.0.7",
        "react-responsive": "^5.0.0",
        "react-select": "^2.4.4",
        "react-share": "^2.4.0",
        "react-slick": "^0.23.1",
        "react-star-ratings": "^2.3.0",
        "react-toastify": "^4.3.0",
        "redux": "^4.0.4",
        "redux-devtools-extension": "^2.13.5",
        "redux-logger": "^3.0.6",
        "redux-thunk": "^2.3.0",
        "stylus": "^0.54.5"
    },
    "devDependencies": {
        "@babel/core": "^7.0.0",
        "@babel/plugin-proposal-optional-chaining": "^7.9.0",
        "cross-env": "^5.2.1",
        "optimize-css-assets-webpack-plugin": "^5.0.3",
        "poststylus": "^1.0.0"
    }
}
4

1 回答 1

0

由于我看到您正在使用next您需要.babelrc在 package.json 旁边添加一个文件并包含以下内容 -

{
  "presets": ["next/babel"],
  "plugins": []
}

next/babel包括

  • 预设环境
  • 预设反应
  • 预设打字稿
  • 插件提案类属性
  • 插件提案对象休息传播
  • 插件转换运行时
  • 样式化的 jsx

另一种方法是在您的 package.json 中添加类似的内容（包括您的应用程序所需的预设/转换）

,
  "babel": {
    "presets": [
      "nano-react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ],
      [
        "@babel/plugin-transform-react-jsx",
        {
          "pragmaFrag": "React.Fragment"
        }
      ]
    ]
  }
于 2020-04-17T14:06:19.240 回答