Vue-loader: [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.

[masx200]

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/[email protected]_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/[email protected][email protected]/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/[email protected][email protected]/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/[email protected][email protected]/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/[email protected][email protected]/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/[email protected]_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/[email protected]_172ba78252e4c29f98987ba985b0c3fc/node_modules/webpack-cli/lib/webpack-cli.js:1952:20)
at async Command. (/data/data/com.termux/files/home/webpack-react-vue-spa-awesome-config/node_modules/.pnpm/[email protected]_172ba78252e4c29f98987ba985b0c3fc/node_modules/webpack-cli/lib/webpack-cli.js:742:25)
at async Promise.all (index 1)
at async Command. (/data/data/com.termux/files/home/webpack-react-vue-spa-awesome-config/node_modules/.pnpm/[email protected]_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

[masx200]

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

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

[fryght]

It seems to only load the parser rule when it is present in the Webpack configuration (I ran into the same issue). Not sure if this is an issue in this package or in Webpack itself.

[masx200]

It seems to only load the parser rule when it is present in the Webpack configuration (I ran into the same issue). Not sure if this is an issue in this package or in Webpack itself.

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

https://webpack.docschina.org/configuration/module/#ruleparser

https://webpack.js.org/configuration/module/#ruleparser

[zhangmingmeng]

所以这个问题怎么解决的啊，我哭辽o(╥﹏╥)o

So how can this problem be solved? I cried

[masx200]

所以这个问题怎么解决的啊，我哭辽o(╥﹏╥)o

So how can this problem be solved? I cried

{ parser: { requireEnsure: !1 } },

Just delete this code.

[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.

[joshuafc]

+1,found the same issue at "vue-loader": "^16.3.0", & "webpack": "^5.41.1",

[misterpancn]

The same problem I tried to assert in the source code and found that vue-loader would parse to

{
    test: /\.html$/,
    use: 'vue-html-loader'
},

, which was strange.

"vue-loader": "^15.9.8",
"webpack": "^5.50.0",