Issue with Setting Up Webpack and Babel

Question

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.

Answer 1

The 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']
        }
      }
    ]
  }