{

Fix for Invalid configuration object: Unknown property query webpack and babel


Fix for Invalid configuration object: Unknown property  query webpack and babel

Recently, I am working on upgrading one of the node applications with the latest versions and My Application uses the webpack build tool.

I upgraded nodejs webpack and all dependencies to the latest version.

Got an error after upgrading to the latest version for webpack.

Here is an error after running npm run start on my node application.

PluginError [ValidationError]: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

  • configuration.module.rules[2] has an unknown property ‘query’. These properties are valid: object { assert?, 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. at validate (B:\myblogs\cloudhadoop\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11) at validateSchema (B:\myblogs\cloudhadoop\node_modules\webpack\lib\validateSchema.js:78:2) at create (B:\myblogs\cloudhadoop\node_modules\webpack\lib\webpack.js:111:24) at webpack (B:\myblogs\cloudhadoop\node_modules\webpack\lib\webpack.js:142:47) at webpack (B:\myblogs\cloudhadoop\node_modules\webpack\lib\index.js:55:16) at B:\myblogs\cloudhadoop/gulpfile.babel.js:108:5 at js (B:\myblogs\cloudhadoop\node_modules\undertaker\lib\set-task.js:13:15) at bound (domain.js:416:15) at runBound (domain.js:427:12) at asyncRunner (B:\myblogs\cloudhadoop\node_modules\async-done\index.js:55:18) { errors: [ { keyword: ‘oneOf’, dataPath: ‘.module.rules’, schemaPath: ‘#/properties/rules/oneOf’ }]

I am using webpack@“4.42.1”, for my project, upgraded to webpack@5.64.4.

Debugged further on this and found that the webpack configuration for babel-loading is causing an error.

module: {
  rules: [
    {
      test: /\.js?$/,
      loader: "babel-loader",
      exclude: /node_modules/,
      query: {
        cacheDirectory: true
      }
    }
  ]
}

There is no query attribute for rules in webpack 5. Rules contain the query attribute which is removed in the Latest webpack 5. x, Replaced with the options attribute.

module: {
  rules: [
    {
      test: /\.js?$/,
      loader: "babel-loader",
      exclude: /node_modules/,
      options: {
        cacheDirectory: true
      }
    }
  ]
}

Also, you used to another similar error in webpack upgrade from older versions.

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration. the module has an unknown property ‘loaders’.

Here is an webpack configuration object

module: {
    loaders: [{
            test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: "url-loader"
        }
    ]
}

Replace loaders with rules in the webpack 4 version onwards.

module: {
    rules: [{
            test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: "url-loader"
        }
    ]
}

Notes:

if there is an error in webpack build errors, Please always check below

  • Correct webpack version are using
  • Check webpack version is compatible with Nodejs Version
  • Find webpack version is compatible with dependent webpack dependencies
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.