[webpack-cli] Error: [VueLoaderPlugin Error] No matching use for vue-loader is found. Make sure the rule matching .vue files include vue-loader in its use.

Version

15.9.7

Reproduction link

https://github.com/masx200/webpack-react-vue-spa-awesome-config/tree/54ae5e83a1c55b08f2107faced36e66a97aa7a6b/

Steps to reproduce

 webpack  --config ./release/config/webpack.config.js     --mode=production         

What is expected?

There should be no errors.

What is actually happening?

[webpack-cli] Error: [VueLoaderPlugin Error] No matching use for vue-loader is found. Make sure the rule matching .vue files include vue-loader in its use. at VueLoaderPlugin.apply (/data/data/com.termux/files/home/webpack-react-vue-spa-awesome-config/node_modules/.pnpm/vue-loader@15.9.7_05b8f49ac146c83a596ecaf17314083d/node_modules/vue-loader/lib/plugin-webpack5.js:96:13) at createCompiler (/data/data/com.termux/files/home/webpack-react-vue-spa-awesome-config/node_modules/.pnpm/webpack@5.37.0_webpack-cli@4.7.0/node_modules/webpack/lib/webpack.js:74:12) at create (/data/data/com.termux/files/home/webpack-react-vue-spa-awesome-config/node_modules/.pnpm/webpack@5.37.0_webpack-cli@4.7.0/node_modules/webpack/lib/webpack.js:123:16) at webpack (/data/data/com.termux/files/home/webpack-react-vue-spa-awesome-config/node_modules/.pnpm/webpack@5.37.0_webpack-cli@4.7.0/node_modules/webpack/lib/webpack.js:131:47) at WebpackCLI.f [as webpack] (/data/data/com.termux/files/home/webpack-react-vue-spa-awesome-config/node_modules/.pnpm/webpack@5.37.0_webpack-cli@4.7.0/node_modules/webpack/lib/index.js:54:15) at WebpackCLI.createCompiler (/data/data/com.termux/files/home/webpack-react-vue-spa-awesome-config/node_modules/.pnpm/webpack-cli@4.7.0_172ba78252e4c29f98987ba985b0c3fc/node_modules/webpack-cli/lib/webpack-cli.js:1845:29) at async WebpackCLI.buildCommand (/data/data/com.termux/files/home/webpack-react-vue-spa-awesome-config/node_modules/.pnpm/webpack-cli@4.7.0_172ba78252e4c29f98987ba985b0c3fc/node_modules/webpack-cli/lib/webpack-cli.js:1952:20) at async Command.<anonymous> (/data/data/com.termux/files/home/webpack-react-vue-spa-awesome-config/node_modules/.pnpm/webpack-cli@4.7.0_172ba78252e4c29f98987ba985b0c3fc/node_modules/webpack-cli/lib/webpack-cli.js:742:25) at async Promise.all (index 1) at async Command.<anonymous> (/data/data/com.termux/files/home/webpack-react-vue-spa-awesome-config/node_modules/.pnpm/webpack-cli@4.7.0_172ba78252e4c29f98987ba985b0c3fc/node_modules/webpack-cli/lib/webpack-cli.js:1289:13) error Command failed with exit code 2. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

---

https://github.com/masx200/webpack-react-vue-spa-awesome-config/blob/54ae5e83a1c55b08f2107faced36e66a97aa7a6b/release/config/webpack.config.js

https://github.com/masx200/webpack-react-vue-spa-awesome-config/blob/54ae5e83a1c55b08f2107faced36e66a97aa7a6b/package.json

webpack version 5.37.0 nodejs version 14.15.4

[Uniman-Su]

I met this problem today, so I tried to debug the vue-loader code to solve this problem and succeeded. I’m not sure whether I’ve met the same problem of you’ve met. I met this with webpack 5, but it’s ok with webpack 4. Because of the code in file ‘pluginWebpack5.js’, row 44 to 60, there is something wrong in the loop.

for (const rawRule of rules) { // skip rules with 'enforce'. eg. rule for eslint-loader if (rawRule.enforce) { continue; } vueRules = match(rawRule, 'foo.vue'); if (!vueRules.length) { vueRules = match(rawRule, 'foo.vue.html'); } if (vueRules.length > 0) { if (rawRule.oneOf) { throw new Error([VueLoaderPlugin Error] vue-loader currently does not support vue rules with oneOf.); } rawVueRule = rawRule; break; } }

With webpack 5, the rules are passed in from head to tail, if a loader before vue-loader with a test like /.html$/ found, this loop will end. And a wrong loader will be passed to VueLoaderPlugin.

To solve this problem, you must write vue-loader rule before such a .html loader.

[korya]

Same here. After upgrading to webpack v5 the build started failing with the same error:

[webpack-cli] Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.

Moving the rule for Vue files above all HTML rules fixed the problem.

The code to blame is https://github.com/vuejs/vue-loader/blob/2472b2f71d0d0a5ce56e067b7697a496a495ea7c/lib/plugin-webpack5.js#L65-L69. Not sure why it is needed.