Babel尝试构建React App时抛出错误

时间:2018-10-29 21:21:34

标签: javascript node.js reactjs babeljs

这是我的错误:

  

错误:需要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;

1 个答案:

答案 0 :(得分:0)

使用这些预设时,您的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。

希望这会有所帮助。我昨天升级了我的项目。 :)