vue-loader/lib/plugin-webpack5.js is missing updated rule

[shritt]

Version

16.3.0

Related link

https://github.com/webpack/webpack/commit/7f22e4721f2db6c374c0ec1ea8b9c295ac81f494

Steps to reproduce

When trying to run app with vue-loader, it breaks with unable to find DescriptionDataMatcherRulePlugin in webpack5, as it has been updated.

What is expected?

const ruleSetCompiler = new RuleSetCompiler([ 
   ...
   new ObjectMatcherRulePlugin(), 
   ...
 ]) 

What is actually happening?

const ruleSetCompiler = new RuleSetCompiler([ 
   ...
   new DescriptionDataMatcherRulePlugin(), 
   ...
 ]) 

---

Webpack 5 has updated the rule set.

[sebastiansulinski]

Yep - same here - had to manually install [email protected] to make things work.

[boutell]

Is it necessary for vue-loader to keep require-ing the unstable internals of webpack?

In addition to bugs like this, it also introduces the bug that if both your project and one of your dependencies independently depend on different versions of webpack, builds will crash because vue-loader winds up requiring the internals of the wrong one due to npm dependency flattening. Either it doesn't find them or, if they exist in the other major version too, the sanity check for "same webpack instance" fails.

At one point I opened a bug report on webpack itself about this, but I got schooled to the effect that there's a better way for vue-loader to do what it's doing. Here's a complete description of the problem with the response from webpack core devs:

https://github.com/webpack/webpack/issues/12606

I'm not sure whether their suggested solution would cover all the use cases for which vue-loader is currently requiring unsupported bits and bobs of webpack or not.

Here's a direct link to the suggested solution:

https://github.com/webpack/webpack/issues/12606#issuecomment-774305660

[Thrillberg]

Thanks for that context @boutell! I found it helpful although I didn't quite understand the resolution. I think I'm falling right into the "depending independently on different versions of webpack" issue that you flag in your comment, as I describe below.

I tried using [email protected] in my project but then I came across the other error:

[webpack-cli] TypeError: The 'compilation' argument must be an instance of Compilation

It sounds like this is because I'm also using webpacker (I've got a Rails app), which is using a different version of webpack (5.38.1).

Do you have advice on how to resolve this?

[boutell]

Yes that is exactly the problem I'm talking about. It's happening because vue-loader is requiring these private bits of webpack, which involves making the assumption that the "project-level" install of webpack is the same as the one vue-loader is supposed to be working with. In your project and mine, it ain't, and the sanity check falls over.

You can work around it in your project by making sure your project's top level depends on the same version of webpack that webpacker does. Then delete package-lock.json, clear node_modules, npm install and you should get only one version of webpack, so vue-loader can't require anything from the "wrong" one.

But long term I'm hoping these suggestions from the webpack team will lead to a more permanent resolution — always respecting that the vue-loader team no doubt knows more about this issue than I and has a great deal on their plate as well. Hopefully they will chime in. 🙏

[Jaffsterz]

We have found this same issue after upgrading to webpack 5.48 (and vue-loader15.9.7). Downgrading to 5.47 fixed it but that's obviously only going to be a temporary solution.

[jannescb]

Thanks! Worked for me in a fresh Laravel installation (^8.40) using mix.vue() that did fail before.