I'm on webpack 5 and upgrading Next.js to 12.1.6 while building or running the application npm run getting below error:
ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
configuration[0].module.rules[5] should be one of these:
["..." | 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.
Details:
* configuration[0].module.rules[5].loader should be a non-empty string.
-> A loader request.
- configuration[1].module.rules[4] should be one of these:
["..." | 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.
Details:
* configuration[1].module.rules[4].loader should be a non-empty string.
-> A loader request.
- configuration[2].module.rules[6] should be one of these:
["..." | 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.
webpack: (config) => {
const updatedConfig = config
const originalEntry = config.entry
updatedConfig.entry = async () => {
const entries = await originalEntry()
if (entries['main.js'] && !entries['main.js'].includes('./adapters/polyfills.adapters.js')) {
entries['main.js'].unshift('./adapters/polyfills.adapters.js')
}
return entries
}
updatedConfig.module.rules.push({
test: /\.(eot|woff|woff2|ttf|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
name: '[name].[ext]',
},
},
})
updatedConfig.module.rules.push({
test: /\.test.js$/,
loader: 'ignore-loader',
})
return updatedConfig
},