Open
Description
Version
15.8.3
Reproduction link
https://github.com/ryanelian/vue-loader-bug
Steps to reproduce
Add this line before vue-loader in webpack 5 configuration.
{
test: /\.html?$/,
loader: 'html-loader'
},
What is expected?
No error.
What is actually happening?
⬢ webpack: Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
This is almost exactly the same as a past issue: #1246
But this time it's webpack 5.
Activity
lovetingyuan commentedon Jan 20, 2020
It is a bug indeed.
vue-loader
will search all rules which matchesfoo.vue
first, if not found, it will try to matchfoo.vue.html
.While plugin for webpack 5 does not traverse all rules. It matches .vue then .vue.html with a single rule. @18566246732
LP1994 commentedon Oct 13, 2020
When you use "webpack v5.0.0", if you encounter "error error: [vueloaderplugin error] no matching use for Vue loader is found. Make sure the rule matching. Vue files include Vue loader in its", If other loaders appear before "Vue loader", for example, "HTML loader" appears before "Vue loader", then just add an "enforce" option in the rules of "HTML loader", and its value is the string "post". In this way, the original loader can be used normally without changing the order of the original loader.
The configuration example code is as follows:
module: {
rules: [
// first loader
{
test: /.(html|htm)$/i,
enforce: 'post',
use: [
{
loader: 'html-loader',
},
],
},
// other loader...
{
test: /.vue$/i,
use: [
{
loader: 'vue-loader',
},
],
},
],
}
LP1994 commentedon Oct 13, 2020
Today, while updating the configuration of webpack 5, I explored this problem and verified that this method is ok.
fix: Don't use rules that also match ".html"
fix: Don't use rules that also match ".html"
fix: Don't use rules that also match ".html"