How to investigate/resolve a webpack configuration error?

[horuskol]

Overnight, without any changes to package.json or yarn.lock, my build broke. I'm currently using v5.0.0-rc.1 of vue-cli

$ vue-cli-service build

 ERROR  ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
         - configuration.plugins[5] misses the property 'apply'. Should be:
           function
           -> The run point of the plugin, required method.

I remove node_modules and ran yarn install to replicate the issue on my dev machine.

But now I'm lost in how to resolve (or report an issue).

I'm building a vue-based PWA, and have so far not configured webpack directly - rather relying on the vue-cli plugins to pull all that together for me.

The results from vue-inspect have this plugin at [5]:

new HtmlWebpackPlugin(
     {
       title: 'cross-it-off-pwa',
       scriptLoading: 'defer',
       templateParameters: function
         () {
         /* omitted long function */
       },
       'template': '/var/checkouts/websites/cross-it-off-pwa/public/index.html'
     }
   ),

When I dig into the library code, the plugin class does have an apply method.

[cexbrayat]

@horuskol Do you have the issue when running yarn serve? I suspect this happens only with the production mode.
In that case you need vue inspect --mode production to see which plugin is applied.

I'm seeing a similar issue, and in my project plugins[5] is extract-css. Is it the same for you?

[horuskol]

Thanks, yeah, when I set the mode flag to production, I get the same extract-css plugin at number [5].

[cexbrayat]

This would make sense as https://www.npmjs.com/package/mini-css-extract-plugin was released 15h ago, and has a breaking change in its packaging that seems to affect a lot of people webpack-contrib/mini-css-extract-plugin#896

As a temporary workaround, add

"resolutions": {
    "mini-css-extract-plugin": "~2.4.5"
  }

to your project

[50l3r]

This would make sense as https://www.npmjs.com/package/mini-css-extract-plugin was released 15h ago, and has a breaking change in its packaging that seems to affect a lot of people webpack-contrib/mini-css-extract-plugin#896

As a temporary workaround, add

"resolutions": {
    "mini-css-extract-plugin": "~2.4.5"
  }

to your project

I have the same problem and extract-css its my problem:

/* config.plugin('extract-css') */
    {
      args: [
        {
          filename: 'css/[name].[contenthash:8].css',
          chunkFilename: 'css/[name].[contenthash:8].css'
        }
      ]
    }

I try this adding this to packaje.json with npm:

"overrides": {
    "mini-css-extract-plugin": "~2.4.5"
}

But without result. Any ideas?

[horuskol]

npm overrides seems to work a little differently to yarn resolutions - do you have a direct dependency on mini-css-extract-plugin in your package.json?

Also, the problem was fixed in the plugin, so the latest version should be fine now.

[50l3r]

I solved it adding mini-css-extract-plugin@~2.4.5 to devDependencies