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.

loganfsmyth · Accepted Answer · 2020-10-29 18:50:58Z

24

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

answered Oct 29, 2020 at 18:50

loganfsmyth

162k31 gold badges349 silver badges259 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aye Over a year ago

Thanks man. I changed it to options and it runs successfully. I will pay more attention to guides next time.

user3303864 Over a year ago

someone needs to tell about backwards compatibility to the folds who write js libs. It so frustrating!

Collectives™ on Stack Overflow

Issue with Setting Up Webpack and Babel

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related