ReferenceError: Unknown option: .present - reactjs

Question

hello i just made environment setup for react js and it gives me error
ReferenceError: Unknown option: .present. and here is codes of .babelrc webpack.config.js, package.json and react.js (file)
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
webpack.config.js :
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './react.js',
output:{
path: path.join(__dirname, '/frapp'),
filename: 'bundled.js'
},
devServer:{
inline: true,
port: 8001
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query:{
present:['es2015', 'react']
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
]
}
package.json :
{
"name": "reacc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"html-webpack-plugin": "^3.2.0",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14"
}
}
for more details i would like to screenshot my directory here it is
here is part of error : Module build failed (from ./node_modules/babel-loader/lib/index.js):
ReferenceError: Unknown option: .present. Check out https://babeljs.io/docs/en/b
abel-core/#options for more information about options.
as a matter of fact, react is opens html page but does not display text in div

Answer 1

It's presets, not present:['es2015', 'react']. There's a typo in your webpack.config.js.
Also what's that query key?
query: {
present:['es2015', 'react']
}
From what I know it should be options. So:
options: {
presets: ['es2015', 'react']
}