[VueLoaderPlugin Error] No matching rule for .vue files found - when files have different extension than .vue

[roysanchez]

Version

15.0.0-rc.1

Reproduction link

N/A

Steps to reproduce

const path = require('path');
const webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader')


module.exports = (env) => {
   const isDevBuild = !(env && env.prod);

   return [{
       stats: { modules: false },
       context: __dirname,
       resolve: { extensions: [ '.js', '.ts' ] },
       entry: { 'main': './ClientApp/boot.ts' },
       module: {
            rules: [
                { test: /\.vue\.html$/, loader: 'vue-loader' },  //Change this line to { test: /\.vue/, loader: 'vue-loader' } to make it work
                { test: /\.ts$/, use: 'ts-loader?silent=true' }
            ]
        },
       output: {
           path: path.join(__dirname,  './wwwroot/dist'),
           filename: '[name].js',
           publicPath: 'dist/'
       },
       plugins: [
           new VueLoaderPlugin()
       ]
   }];

};

What is expected?

The bundle is successful

What is actually happening?

Webpack throws the following error:
[VueLoaderPlugin Error] No matching rule for .vue files found.
Make sure there is at least one root-level rule that matches .vue files.

[yyx990803]

Why are you using .vue.html extension instead of just .vue?

[roysanchez]

It's the default extension on the aspnetcore vue template, I think they do it so you get autocomplete on visual studio. Get Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ From: Evan You <notifications@github.com> Sent: Thursday, April 12, 2018 9:07:22 AM To: vuejs/vue-loader Cc: Roy Sanchez; Author Subject: Re: [vuejs/vue-loader] [VueLoaderPlugin Error] No matching rule for .vue files found - when files have different extension than .vue (#1238) Why are you using .vue.html extension instead of just .vue? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#1238 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ANYcSHcjbfW59Zh6dcJvnWkgOlGqc7YJks5tn1GKgaJpZM4TQDkM>.

[yyx990803]

Well, Vue SFCs are not technically HTML. The recommended approach is using the proper .vue extension and VSCode (which has excellent SFC support via the Vetur extension) instead Visual Studio.

If you really want to stick with vue.html, you can workaround this by having both rules:

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

[roysanchez]

Thanks that worked even thought it looks like a hack 😅 as I don't have any .vue files in the project

[yyx990803]

@roysanchez I added a special case for .vue.html. Will work without the extra rule in the next release.

[BrainBacon]

@yyx990803 I have a similar issue. My .vue files have become .pug instead. Is there any chance we can have a configurable option instead of just handling special cases?

[Flamenco]

Why not just add an optional regex to the current instruction?
rules: [
{ test: /.vue(.html)?$/, loader: 'vue-loader' },
]

[BrainBacon]

@Flamenco the loader was working only when there was a rule for .vue specifically, hence the need to have multiple rules. I don't know if this is still the case.

[dietergeerts]

Hi, I encountered the same error. The plugin is too restrictive in checking the rules. This is what I have:

        // We need to fool the VueLoaderPlugin, as that checks if a rule is available
        // for vue components, but it can't see our more restricted one....
        // It even checks the name of the loader, so aliasing also doesn't work.
        {
          test: /\.vue$/,
          include: path.resolve(__dirname),
          loader: 'vue-loader',
        },
        {
          test: /\.vue$/,
          include: options.sourceDirectory,
          issuer: /\.docs\.md$/,
          use: [
            { loader: 'fb-inject-vue-loader' },
            { loader: 'fb-vue-loader' },
          ],
        },

This comes from a package we make that is to be used with other packages, so we do aliasing to be sure that the others can use different versions of loaders etc...

[hzm131]

都是大神

[diadal]

I fund the cause of this issue in /node_modules/vue-loader/lib/plugin.js there is this checking point vueLoaderUseIndex < 0 under const vueUse = vueRule.use I make this following changes

let ListIndex = [];

    const vueLoaderUseIndex = vueUse.findIndex(u => {
      console.log(u)
      let vueChecker =  /^vue-loader|(\/|\\|@)vue-loader/.test(u.loader)

      console.log({u:u.loader})

      ListIndex[u.loader] = vueChecker
      return vueChecker
    })
    console.log({ListIndex:ListIndex['vue-loader']})

in my terminal I have this

{ ListIndex: [ 'vue-loader': true ] }
{ ListIndex: [ 'html-loader': false ] }

this show to rules are been fire when I npm run dev and this html-loader is not defined in my web pack config file so vueLoaderUseIndex < 0 stop the processing since 'html-loader': false

am currently working on the solution or if there is fast fix for this please share