Vue-loader: Error when vue-loader rule is declared after rule for HTML loader

Created on 24 Apr 2018 · 3Comments · Source: vuejs/vue-loader

Error when using vue-loader version 15.0.0, but curiously no error when using version 15.0.0-rc.2

/**
 * Gets a configured HTML template rules for webpack. 
 * You won't find this loader in npm tho.
 * This is a loader for minifying and stringifying HTML files as exported JS module.
 */
get templatesWebpackRules() {
    return {
        test: /\.html$/,
        use: [{
            loader: 'template-loader'
        }]
    };
}

/**
 * Gets a Vue Single-File Component rule for webpack.
 */
get vueWebpackRules() {
    return {
        test: /\.vue$/,
        use: [{
            loader: 'vue-loader',
            options: {
                transformAssetUrls: {}
            }
        }]
    }
}

Webpack config: ERROR

module: {
    rules: [
        this.typescriptWebpackRules,
        this.templatesWebpackRules,
        this.vueWebpackRules,
        this.cssWebpackRules
    ]
},

FATAL ERROR during JS build:
Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
    at VueLoaderPlugin.apply (E:\VS\instapack\node_modules\vue-loader\lib\plugin.js:48:13)
    at webpack (E:\VS\instapack\node_modules\webpack\lib\webpack.js:37:12)
    at TypeScriptBuildTool.build (E:\VS\instapack\bin\TypeScriptBuildTool.js:244:9)
    at Compiler.<anonymous> (E:\VS\instapack\bin\Compiler.js:212:18)
    at Generator.next (<anonymous>)
    at E:\VS\instapack\bin\Compiler.js:7:71
    at new Promise (<anonymous>)
    at __awaiter (E:\VS\instapack\bin\Compiler.js:3:12)
    at Compiler.buildJS (E:\VS\instapack\bin\Compiler.js:210:16)
    at Compiler.build (E:\VS\instapack\bin\Compiler.js:183:33)
    at process.on (E:\VS\instapack\bin\Compiler.js:250:39)
    at emitTwo (events.js:126:13)
    at process.emit (events.js:214:7)
    at emit (internal/child_process.js:772:12)
    at _combinedTickCallback (internal/process/next_tick.js:141:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)

Webpack config: not error

This is my workaround. Am still concerned though. (Why should I do this?)

module: {
    rules: [
        this.typescriptWebpackRules,
        this.vueWebpackRules,
        this.templatesWebpackRules,
        this.cssWebpackRules
    ]
},

Webpack config: also not error

module: {
    rules: [
        this.typescriptWebpackRules,
        // this.templatesWebpackRules,
        this.vueWebpackRules,
        this.cssWebpackRules
    ]
},

If I have to guess why, this is caused by a certain commit related to .vue.html file, which landed after 15.0.0-rc.2. But I'm not 100% sure either.

Source

ryanelian

All 3 comments

Hello, your issue has been closed because it does not conform to our issue requirements. In order to ensure every issue provides the necessary information for us to investigate, we require the use of the Issue Helper when creating new issues. Thank you!