About debugging components defined by the same name

Version

3.2.0

Reproduction link

https://github.com/crixusshen/vuecli-debug-reproduction

Environment info

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
    Yarn: Not Found
    npm: 6.14.5 - ~/.nvm/versions/node/v12.16.3/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  3.12.1 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  3.12.1 
    @vue/cli-plugin-babel: ^3.11.0 => 3.12.1 
    @vue/cli-plugin-eslint: ^3.11.0 => 3.12.1 
    @vue/cli-service: ^3.11.0 => 3.12.1 
    @vue/cli-shared-utils:  3.12.1 
    @vue/component-compiler-utils:  3.2.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.3 (4.7.1)
    vue: ^2.6.10 => 2.6.12 
    vue-eslint-parser:  2.0.3 (5.0.0)
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.5 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.12 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.4.6

Steps to reproduce

I currently have two subcomponents with the same file name, although their implementations are different. Component A is located in 'src/components/A/HelloWorld.vue', Component B is located in 'src/components/B/HelloWorld.vue', although they are in A and B directories respectively, but their file names are called HelloWorld.vue.

Then use them separately in the main component:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <HelloWorld2 msg="Welcome to Your React.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/A/HelloWorld.vue'
import HelloWorld2 from './components/B/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld,
    HelloWorld2
  }
}
</script>

And then the view rendering is really expected.But I had trouble debugging in chrome.During debugging, I tried to debug A component, but I could only call out the implementation script of B component.At this point its debug path is located at “webpack:///HelloWorld.vue?hash”.

At this point I infer that as long as the component has the same name as the file name, the one after will override the one before when debugging.At that moment, on this basis and I create the src/components/C/HelloWorld.vue，It really confirmed my hypothesis.

This can cause a lot of trouble during debugging or problems where the debug file is not found.

What is expected?

Able to debug different files with the same name in debugging

What is actually happening?

currently only debug the last component in the same file name

It took me a long time to find the reason.

I think the problem occurred at the origin of generating SourceMap. Call stacks after it share this SourceMap data.

Change file node_modules/@vue/component-compiler-utils/dist/parse.js in the following way. It works.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.parse = void 0;
const source_map_1 = require("source-map");
+ const path = require('path');
const hash = require('hash-sum');
const cache = new (require('lru-cache'))(100);
const splitRE = /\r?\n/g;
const emptyRE = /^(?:\/\/)?\s*$/;
function parse(options) {
    const { source, filename = '', compiler, compilerParseOptions = { pad: 'line' }, sourceRoot = '', needMap = true } = options;
    const cacheKey = hash(filename + source + JSON.stringify(compilerParseOptions));
    let output = cache.get(cacheKey);
    if (output)
        return output;
    output = compiler.parseComponent(source, compilerParseOptions);
    if (needMap) {
        if (output.script && !output.script.src) {
            output.script.map = generateSourceMap(filename, source, output.script.content, sourceRoot, compilerParseOptions.pad);
        }
        if (output.styles) {
            output.styles.forEach(style => {
                if (!style.src) {
                    style.map = generateSourceMap(filename, source, style.content, sourceRoot, compilerParseOptions.pad);
                }
            });
        }
    }
    cache.set(cacheKey, output);
    return output;
}
exports.parse = parse;
function generateSourceMap(filename, source, generated, sourceRoot, pad) {
+  filename = path.join(sourceRoot, filename).replace(/\\/g, '/')
    const map = new source_map_1.SourceMapGenerator({
        file: filename,
-       sourceRoot: sourceRoot.replace(/\\/g, '/')
+       sourceRoot: ''
    });
    let offset = 0;
    if (!pad) {
        offset =
            source
                .split(generated)
                .shift()
                .split(splitRE).length - 1;
    }
    map.setSourceContent(filename, source);
    generated.split(splitRE).forEach((line, index) => {
        if (!emptyRE.test(line)) {
            map.addMapping({
                source: filename,
                original: {
                    line: index + 1 + offset,
                    column: 0
                },
                generated: {
                    line: index + 1,
                    column: 0
                }
            });
        }
    });
    return JSON.parse(map.toString());
}

This is the final result:

I think it's a problem of this package.

In other files compiled with webpack, the sourceRoot is not used and paths in sources are always relative path not just a filename.

The above code may not be the final solution, it just provides some suggestions.

vuejs / component-compiler-utils