Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

422
Views
Webpack Configuration Error - webpack 5 and next 12.1.6

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
},
about 4 years ago · Santiago Gelvez
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!