Babel嘗試構建React App時拋出錯誤

Question

這是我的錯誤：

錯誤：需要Babel“ ^ 7.0.0-0”，但已加載“ 6.26.3”。 如果您確定擁有@ babel / core的兼容版本，則可能是您的構建過程中正在加載錯誤的版本。 檢查此錯誤的堆棧跟蹤，以查找第一個未提及“ @ babel / core”或“ babel-core”的條目，以了解正在調用的Babel。 （同時處理預設：“ C：\\ Users \\ ExpoTech \\ workspace \\ liability_release_form \\ node_modules \\ @babel \\ preset-env \\ lib \\ index.js”）；

我已經嘗試了來自GitHub和Stack Overflow的6種建議的解決方案，但是仍然會遇到同樣的錯誤。 任何幫助將不勝感激。

這是我的package.json：

{
  "name": "liability-waiver-release",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@trendmicro/react-toggle-switch": "^0.5.7",
    "axios": "^0.18.0",
    "body-parser": "^1.18.3",
    "bootstrap": "^4.1.3",
    "css-loader": "^1.0.1",
    "express": "^4.16.4",
    "jshint": "^2.9.6",
    "jshint-loader": "^0.8.4",
    "mongodb": "^3.1.8",
    "mongoose": "^5.3.7",
    "nodemon": "^1.18.5",
    "react": "^16.5.2",
    "react-bootstrap": "^0.32.4",
    "react-dom": "^16.5.2",
    "react-modal": "^3.6.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.0.5",
    "reactstrap": "^6.5.0",
    "regenerator-runtime": "^0.12.1"
  },
  "scripts": {
    "webpack": "webpack",
    "start": "npm run build && node server/server.js",
    "build": "babel ./server/server.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "babel-cli": "^6.26.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "prop-types": "^15.6.2",
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  }
}

這是我的.babelrc：

{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
}

這是我的server.js文件：

import express from 'express';
import router from './routes/routes.js';
import path from 'path';

const app = express();

app.set('views', path.join(__dirname, '../client'));
app.use(express.static(path.join(__dirname, '../client')));

app.use('/', router);

const port = 8080;

app.listen(port, function() {
 console.log('running at localhost: ' + port);
});

export default app;

Answer 1

使用這些預設時，您的project.json文件中沒有這些預設。

{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
}

如下更新您的package.json。

{
    "@babel/core": "^7.1.2",
    "babel-cli": "^6.26.0",
    "babel-core": "^7.0.0-bridge.0", // remove this
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",  // remove this and install "@babel/env"
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "prop-types": "^15.6.2",
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
}

並安裝@ babel / react。

希望這可以幫助。 我昨天升級了我的項目。 :)