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?

Answer 1

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.

Answer 2

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.