Webpack: Unknown property "query"?

Question

I'm practicing with React to build a button that increments a counter by 1 when clicked. I'm at the part where I need to package everything with Webpack so I can run it in the browser. I run the following:

webpack --watch --mode=development

and get the following error:

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.module.rules[0].use has an unknown property 'query'. These properties are valid:
   object { ident?, loader?, options? }
 

this is my webpack.config.js

const path = require('path');

module.exports = {
  entry: './entry.jsx',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
  rules: [
    {
      test: /\.jsx?$/,
      use: {
        loader: 'babel-loader',
        query: {
          presets: ['@babel/env', '@babel/react']
        }
      },
    }
  ]
},

  
  
  devtool: 'source-map',
  resolve: {
    extensions: [".js", ".jsx", "*"]
  }
};

this is package.json

{
  "name": "click-counter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "postinstall": "webpack",
    "webpack": "webpack --watch --mode=development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
  }
}

What do I need to do to fix this error?

Answer 1

there is no query key in a valid webpack configuration file, change this part:

use: {
  loader: 'babel-loader',
  query: {
    presets: ['@babel/env', '@babel/react']
  }
},

to:

use: {
  loader: 'babel-loader',
  options: {
    presets: ['@babel/env', '@babel/react']
  }
}

also if you have a .babelrc file inside of your root directory you can add these part of your configuration in to that file. and babel would pick that up automatically. read more at here