VueLoaderPlugin Error: No matching use for vue-loader is found

Question

I am using webpack within a Laravel Mix project. When my webpack.config.js looks like this, Webpack works without error:

module.exports = {
    module: {
        rules: [{ test: /\.vue$/, loader: 'vue-loader' }]
    }
}

But when I add VueLoaderPlugin like so:

const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    module: {
        rules: [{ test: /\.vue$/, loader: 'vue-loader' }]
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ]
}

I get this error:

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

Which doesn't make sense since I ready have a .vue rule that includes vue-loader. What is the problem here, and how do I resolve it?

I have the same problem when trying to make vue-styleguidist (same webpack config) — Joulss
– Joulss, Commented Sep 14, 2019 at 16:25
check the vue-loader setup manual https://vue-loader.vuejs.org/guide/#manual-setup the main difference is to import/require vue-loader itself not vue-loader/lib/plugin — Shrembo
– Shrembo, Commented Dec 26, 2021 at 16:56

Isaak Eriksson · Accepted Answer · 2020-08-08 02:13:50Z

13

+50

The Laravel mix setup of yours already loads the VueLoaderPlugin implicitly, so reloading it again causes this error.

From reading their docs, it written that they support .vue file compilation without extra configuration.

If you're still not convinced, check out their internal web pack configuration: https://www.github.com/JeffreyWay/laravel-mix/tree/master/src%2Fcomponents%2FVue.js and notice the use of VueLoaderPlugin.

edited Aug 8, 2020 at 2:13

answered Aug 8, 2020 at 2:05

Isaak Eriksson

6631 gold badge9 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Colisan · Accepted Answer · 2022-04-22 09:41:36Z

3

For future reference, helped by this comment I resolved the same issue (in a non-Laravel project) by simply moving up the vue-loader rule in webpack config file, so that it's the first of the rules list.

answered Apr 22, 2022 at 9:41

Colisan

2532 silver badges9 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Vincent Reuling · Accepted Answer · 2019-10-28 14:43:28Z

-3

How about rewriting the import in your config file to:
const { VueLoaderPlugin } = require("vue-loader");

answered Oct 28, 2019 at 14:43

Vincent Reuling

91 bronze badge

Collectives™ on Stack Overflow

VueLoaderPlugin Error: No matching use for vue-loader is found

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related