VueLoaderPlugin causes loaders to run several times

Version

15.0.0

Reproduction link

https://github.com/killerDJO/vue-loader-minimal

Steps to reproduce

Prererquisites:

• ts-loader is used and has options specified (Important!).
• SFC with referenced TypeScript file is used.

Run webpack build using mentioned configuration. Rules might look like this:

module: {
    rules: [
        {
            test: /\.ts$/,
            loader: "ts-loader",
            options: {},
            exclude: [/node_modules/]
        },
        {
            test: /\.vue$/,
            loader: "vue-loader",
        }
    ]
},
resolve: {
    extensions: [".ts"],
},
plugins: [
    new VueLoaderPlugin()
],

What is expected?

Build is finished successfully.

What is actually happening?

Build failed.

---

In the current implementation VueLoaderPlugin clones webpack rules and modifies them to run on .vue files. However, this leads to an issues when a file is referenced from .vue component (e. g. <script src="./App.ts" lang="ts"></script>). In this case the file can be matched by two rules (original and cloned) and ts-loader will be executed two times, with second time executing using output of the first run. This will happend only if “options” object is specified, because otherwise webpack will use a single loader for two rules (VueLoaderPlugin removes “options” during rules cloning, so only original rule will have options).

Aforementioned behaviour has been observed for ts-loader, but is likely to occur for scss/sass loaders as well.

[yevhenii-andrushchak]

Unfortunately, it doesn’t work exactly like this, so .vue.ts cannot be used. It is possible to use resourceQuery or issuer to check for .ts files imported from .vue files, but in this case it will fail for other (non-vue) ts files (entry file will not have an issuer and usual ts files will not have a resourceQuery, so webpack will fail such rules since it doesn’t support checks for an empty value). It might be possible to get this to work using some tricks, but it’s much simpler to just remove options for now.

[yevhenii-andrushchak]

@ericdrobinson This is exactly the issue I ran into. For me it also worked when I removed options from loader. Another workaround I can imagine (if options are neccessary) is to modify ‘test’ parameter, e.g. it can check only for files which are outside of vue components folder (in this case these files will be compiled only by cloned ts-loader, which has own test).