本文介绍了React 构建问题,错误在 ./src/index.js 模块构建失败(来自 ./node_modules/babel-loader/lib/index.js):的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用 Webpack 4 从头开始构建 React 应用程序
I am trying to build react application from scratch using Webpack 4
我在尝试构建时遇到以下错误.而 babel-core 已经安装,我也尝试安装 @babel/core 但它没有用
I am getting following error when I try to build. Whereas babel-core is already installed, I also tried installing @babel/core but it didn't work
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]
};
在问题中添加了包 json 文件package.json
edit: Added the package json file to the questionpackage.json
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.0",
"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": {
"@babel/core": "^7.0.0",
"path": "^0.12.7",
"react": "^16.4.2",
"react-dom": "^16.4.2"
}
{
"name": "boiler-plate-react-webpack-4",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --display-error-details",
"build-dev": "webpack --mode development",
"build-prod": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.0",
"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": {
"@babel/core": "^7.0.0",
"path": "^0.12.7",
"react": "^16.4.2",
"react-dom": "^16.4.2"
}
}
推荐答案
已解决:
问题出在包 babel-loader
上,最新版本需要 @babel/core.把版本降级到7.x,现在好了
The problem was with package babel-loader
, the latest version expects @babel/core. Downgraded the version to 7.x and it's fine now
"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"
}
这篇关于React 构建问题,错误在 ./src/index.js 模块构建失败(来自 ./node_modules/babel-loader/lib/index.js):的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!