使用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"
}
推荐阅读
- JavaScript如何在forEach中使用async和await(forEach和async、await的结合使用)
- Vue-cli 3新建项目报错(ERRORcommand failed npm install –loglevel error —— 解决办法)
- 诺基亚实习面试|诺基亚在校园
- Python中的First Class函数介绍和用法
- 算法设计(最长剩余时间优先(LRTF)CPU调度程序)
- 三星暑期实习研发面试经验|校园班加罗尔
- 堆(heap)数据结构的应用
- AngularJS 动画制作详细实现代码
- 线程(使用信号量的生产者消费者问题套装1)