unable to instrument Vue template code when using vue-loader

[trusktr]

I can't figure any combination of options that will make this work with vue-loader.

What happens is that the <script> of a Vue component is instrumented just fine (it is outputted by vue-loader as a separate file, then babel-loader catches it, but not any expressions in a <template>.

The output "files" for template end with extensions like .vue?vue&type=template&id=qufnai32n or similar.

This is what my config looks like:

// babel.config.js
const babelConfig = {
    plugins: [['babel-plugin-istanbul', {
        extension: ['.js', '.vue'],
        excludeNodeModules: false

    }]]
};

module.exports = babelConfig;

// webpack.config.js
//...
            {
                test: /\.vue$/,
                use: [
                    {
                        loader: 'vue-loader',
                        // Attempt to use Babel with babel-plugin-istanbul (this doesn't make any difference, removing produces the same result)
                        options: {
                            compiler: require('vue-template-babel-compiler')
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader'
                }
            },
// ...

I also tried changing

                test: /\.js$/,

to

                test: /(\.js$)|(\?vue&type=template)/,
                exclude: /node_modules(?!.*\.vue)/,

but that still didn't manage to get vue <template>s instrumented.

Any ideas?

[SoybeanSun]

any ideas now ?

[satouriko]

After a deep investigation into this issue, here's what I reached:

babel-plugin-istanbul passes realpath = getRealpath(this.file.opts.filename) to istanbul-lib-instrument.
The runtime process istanbul-lib-instrument generates uses this path as a key such that any replication would have only one kept.
The problem is, vue-loader produces 2 scripts for SFC files (e.g. src/pages/detail/Page.vue?vue&type=script&lang=ts and src/pages/detail/Page.vue?vue&type=template&id=1c769327&scoped=true), while babel-plugin-istanbul only gets the filename part (which is the same between the two) from babel-loader (babel/babel-loader#916)

An attempt path to fix this problem could be,

1. babel-loader exposes webpack's this.resourceQuery to plugins.
2. babel-plugin-istanbul passes a path made up by filename + query to istanbul-lib-instrument.

A temporary workaround could be, use a customized babel-loader such that filename = `${this.resourcePath}${this.resourceQuery}` No, that doesn't work. Passing filename with query to shouldSkip skips the file. Changes have to be applied to the plugin.