Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vue-loader errored when html-loader is defined BEFORE it in webpack 5 configuration. #1625

Open
ryanelian opened this issue Jan 9, 2020 · 3 comments · May be fixed by #1811
Open

vue-loader errored when html-loader is defined BEFORE it in webpack 5 configuration. #1625

ryanelian opened this issue Jan 9, 2020 · 3 comments · May be fixed by #1811

Comments

@ryanelian
Copy link

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.

@lovetingyuan
Copy link

lovetingyuan commented Jan 20, 2020

It is a bug indeed.
vue-loader will search all rules which matches foo.vue first, if not found, it will try to match foo.vue.html.
While plugin for webpack 5 does not traverse all rules. It matches .vue then .vue.html with a single rule. @18566246732

@LP1994
Copy link

LP1994 commented 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
Copy link

LP1994 commented Oct 13, 2020

Today, while updating the configuration of webpack 5, I explored this problem and verified that this method is ok.

ubipo added a commit to ubipo/vue-loader that referenced this issue Mar 22, 2021
This adds a check so that only rules that only match
foo.vue.html and not foo.html are ignored.

Resolves vuejs#1625
ubipo added a commit to ubipo/vue-loader that referenced this issue Mar 22, 2021
This adds a check so that rules that match foo.vue.html but *also* foo.html are ignored.

Resolves vuejs#1625
ubipo added a commit to ubipo/vue-loader that referenced this issue Mar 22, 2021
This adds a check so that rules that match foo.vue.html but *also* foo.html are ignored.

Resolves vuejs#1625
@ubipo ubipo linked a pull request Mar 22, 2021 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants