Skip to content

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

Open
@ryanelian

Description

@ryanelian

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

lovetingyuan commented on Jan 20, 2020

@lovetingyuan

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

LP1994 commented on Oct 13, 2020

@LP1994

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

LP1994 commented on Oct 13, 2020

@LP1994

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

added 3 commits that reference this issue on Mar 22, 2021
3a62641
7238a44
a0b5e2b
linked a pull request that will close this issue on Mar 22, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @haoqunjiang@lovetingyuan@ryanelian@LP1994

      Issue actions

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