material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.14k stars 2.15k forks source link

[webpack-cli] Invalid configuration object: Unknown property 'query' #7179

Open ChakshuGupta13 opened 3 years ago

ChakshuGupta13 commented 3 years ago

In the getting-started.md, while proceeding with Step 3, I received the following error:

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration[0].module.rules[1] has an unknown property 'query'. These properties are valid:
   object { compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }
   -> A rule description with conditions and effects for modules.

With the help the documentation of webpack (babel-loader), I changed the code mentioned in the Step 3 with the following lines:

{
    test: /\.js$/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env']
        }
    },
}

Though I am not sure whether it is correct patch for this error but it should be resolved as soon as possible.

steffdimitrov commented 3 years ago

Yes, it is correct.

brandondiamond commented 2 years ago

Thanks for flagging this. Would you mind opening a PR with this correction? Thanks!

milindgoel15 commented 2 years ago

I'm also facing similar issue while using babel-loader

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration has an unknown property 'modules'. 
const path = require('path');

module.exports = {
    entry: {
        barba: './js/barba.js',
        kursor: './js/kursor.js',
        snowflakes: './js/snowflakes.js',
    },
    modules: {
        rules: [
            {
                test: /\.(js)$/,
                use: "babel-loader",
            },
        ],
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'bundle.js',
    },

    mode: 'production'
}

apparently, removing babel-loader does fix this error

NSanchay commented 2 years ago

yes I am also facing this problem configuration.module.rules[9].use has an unknown property 'exclude'. These properties are valid: object { ident?, loader?, options? }