Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

How to investigate/resolve a webpack configuration error? #6943

Answered by cexbrayat
horuskol asked this question in Q&A
How to investigate/resolve a webpack configuration error? #6943
@horuskol horuskol
Jan 15, 2022 · 2 comments · 4 replies
Answered by cexbrayat Return to top
Discussion options

horuskol
Jan 15, 2022

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.
You must be logged in to vote
Answered by cexbrayat Jan 15, 2022

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

View full answer

Replies: 2 comments · 4 replies

Comment options

cexbrayat
Jan 15, 2022

@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?
You must be logged in to vote
1 reply
@horuskol
Comment options

horuskol Jan 15, 2022
Author

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

cexbrayat
Jan 15, 2022

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
You must be logged in to vote
3 replies
@50l3r
Comment options

50l3r Jan 31, 2022

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
Comment options

horuskol Feb 1, 2022
Author

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
Comment options

50l3r Feb 1, 2022

I solved it adding mini-css-extract-plugin@~2.4.5 to devDependencies
Answer selected by horuskol
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
🙏
Q&A
Labels
None yet
3 participants
@horuskol @cexbrayat @50l3r
Morty Proxy This is a proxified and sanitized view of the page, visit original site.