Webpack: Unknown property "query"?

user_10061888 0
Viewed 6231

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?

webpack reactjs javascript
1 Answers

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

user_53543410
Related