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. You can also check Fix for digital envelope routines::unsupported

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 [email protected].

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 the 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 a 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 is using
  • Check webpack version is compatible with Nodejs Version
  • Find the webpack version is compatible with dependent webpack dependencies