I have followed every instruction for setting up webpack and babel. I Installed the dependencies with npm install --save-dev webpack webpack-dev-server @babel/core babel-loader @babel/preset-env @babel/polyfill. I also installed the webpack-cli. Here is what I have in my package.json file:
{
"name": "webpack_babel_prac",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "wepack-dev-server --mode development --open",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.12.1",
"babel-loader": "^8.1.0",
"webpack": "^5.3.0",
"webpack-cli": "^4.1.0",
"webpack-dev-server": "^3.11.0"
}
}
The following codes are the ones I have in my webpack.config.js file
const path = require('path');
module.exports = {
entry: {
app: ['@babel/polyfill','./src/app.js']
},
output:{
path: path.resolve(__dirname, 'build'),
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query:{
presets: ['@babel/preset-env']
}
}
]
}
}
when I run build (npm run build) it always gives me error:
> [email protected] build /Users/sel/Desktop/js_course/webpack_babel_prac
> webpack
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.module.rules[0] has an unknown property 'query'. These properties are valid:
object { compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
-> A rule description with conditions and effects for modules.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/sel/.npm/_logs/2020-10-29T18_12_00_720Z-debug.log
sels-MacBook-Air:webpack_babel_prac sel$
It's telling me that the configuration has has an unknown property "query" as shown above. When I remove query and leave presets: ['@babel/preset-env']. It will display configuration has has an unknown property "preset". However, when I remove query and presets object it will run build but in my app.bundle.js, the codes from my app.js file are not completely compiled into ES5.
I would I appreciate it if anyone can tell me what I'm doing wrong.
Thanks.
I have followed every instruction for setting up webpack and babel. I Installed the dependencies with npm install --save-dev webpack webpack-dev-server @babel/core babel-loader @babel/preset-env @babel/polyfill. I also installed the webpack-cli. Here is what I have in my package.json file:
{
"name": "webpack_babel_prac",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "wepack-dev-server --mode development --open",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.12.1",
"babel-loader": "^8.1.0",
"webpack": "^5.3.0",
"webpack-cli": "^4.1.0",
"webpack-dev-server": "^3.11.0"
}
}
The following codes are the ones I have in my webpack.config.js file
const path = require('path');
module.exports = {
entry: {
app: ['@babel/polyfill','./src/app.js']
},
output:{
path: path.resolve(__dirname, 'build'),
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query:{
presets: ['@babel/preset-env']
}
}
]
}
}
when I run build (npm run build) it always gives me error:
> [email protected] build /Users/sel/Desktop/js_course/webpack_babel_prac
> webpack
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.module.rules[0] has an unknown property 'query'. These properties are valid:
object { compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
-> A rule description with conditions and effects for modules.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/sel/.npm/_logs/2020-10-29T18_12_00_720Z-debug.log
sels-MacBook-Air:webpack_babel_prac sel$
It's telling me that the configuration has has an unknown property "query" as shown above. When I remove query and leave presets: ['@babel/preset-env']. It will display configuration has has an unknown property "preset". However, when I remove query and presets object it will run build but in my app.bundle.js, the codes from my app.js file are not completely compiled into ES5.
I would I appreciate it if anyone can tell me what I'm doing wrong.
Thanks.
Share Improve this question asked Oct 29, 2020 at 18:27 AyeAye 2813 silver badges10 bronze badges1 Answer
Reset to default 24The babel-loader docs show several examples of how to do this. If you're following guides and seeing this, they must be guides that were written several years ago.
query should be options.
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options:{
presets: ['@babel/preset-env']
}
}
]
}