J'essaie de créer une application de réaction à partir de zéro avec Webpack 4
Je reçois une erreur suivante lorsque j'essaie de construire. Alors que babel-core est déjà installé, j'ai aussi essayé d'installer @ babel/core mais cela n'a pas fonctionné
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]
};
edit: Ajout du fichier package json à la question package.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"
}
{ "nom": "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 \" Erreur: aucun test spécifié\"&& 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" }, "dépendances": { "@ babel/core": "^ 7.0.0", "chemin": "^ 0.12.7", "réagir": "^ 16.4.2", "react-dom": "^ 16.4.2" } }
Résolu:
Le problème était avec le paquet babel-loader
, la dernière version attend @ babel/core. Rétrogradé la version à 7.x et c'est bon maintenant
"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"
}
Oui, babel-loader
8 nécessite babel 7, ce qui prête à confusion. Si vous voulez utiliser le nouveau Babel, c'est assez simple. Vous feriez quelque chose comme ça:
"devDependencies": {
"babel-loader": "^8.0.0",
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",,
"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"
}
Plus un petit changement à vos préréglages babel, où que vous les définissiez:
"babel": {
"presets": [
"@babel/env",
"@babel/react"
]
}
Vous pouvez voir un diff pour un projet que j'ai mis à jour vers babel 7 ici: https://github.com/ccnmtl/astro-interactives/commit/97b31ca7948d177d7f41439bdbeb0a54cd3e69da
Une autre solution consiste à conserver le @babel/core
et à installer babel-core : ^7.0.0-bridge.0
. C'est un paquet de passerelle qui vous permet de prendre en charge les paquets précédents de Babel et de mettre à jour votre noyau de babel au dernier. Ensuite, vous pouvez également mettre à jour votre chargeur babel vers LTS.