解决React构建错误(ERROR Module build failed (from .node_modules babel-loader lib index.js))

使用webpack4构建react应用,但是构建的时候出现如下错误,其中babel-core已安装,安装@babel/core但依然无效,错误信息如下:

ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/core' at Function.Module._resolveFilename (module.js:538:15) at Function.Module._load (module.js:468:25) at Module.require (module.js:587:17) at require (internal/module.js:11:18) at Object.< anonymous> (/Users/digvijay.upadhyay/digvijayu/react_webpack_4_from_scratch/node_modules/babel-loader/lib/index.js:5:15) at Module._compile (module.js:643:30) at Object.Module._extensions..js (module.js:654:10) at Module.load (module.js:556:32) at tryModuleLoad (module.js:499:12) at Function.Module._load (module.js:491:3) @ multi (webpack)-dev-server/client?http://localhost:8080 ./src main[1] Child html-webpack-plugin for "index.html": 1 asset Entrypoint undefined = ./index.html [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 500 bytes {0} [built] [./node_modules/lodash/lodash.js] 527 KiB {0} [built] [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {0} [built] [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built] ? ?wdm?: Failed to compile.

webpack.config.js配置文件如下:
const HtmlWebPackPlugin = require("html-webpack-plugin"); const htmlPlugin = new HtmlWebPackPlugin({ template: "./src/index.html", filename: "./index.html" }); module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } } ] }, plugins: [htmlPlugin] };

【解决React构建错误(ERROR Module build failed (from .node_modules babel-loader lib index.js))】解决办法如下:
该问题的主要原因是包babel-loader,最新版本的@babel/core,将版本改为7.x后即可解决:
"devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "html-webpack-plugin": "^3.2.0", "webpack": "^4.17.1", "webpack-cli": "^3.1.0", "webpack-dev-server": "^3.1.6" }, "dependencies": { "react": "^16.4.2", "react-dom": "^16.4.2" }

    推荐阅读