About debugging components defined by the same name #4535
Description
Version
3.11.0
Reproduction link
https://github.com/vuejs/vue-cli
Environment info
Environment Info:
System:
OS: macOS 10.14.5
CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Binaries:
Node: 10.0.0 - ~/.nvm/versions/node/v10.0.0/bin/node
Yarn: 1.17.3 - ~/.yarn/bin/yarn
npm: 5.6.0 - ~/.nvm/versions/node/v10.0.0/bin/npm
Browsers:
Chrome: 76.0.3809.132
Firefox: Not Found
Safari: 12.1.1
npmPackages:
@vue/babel-helper-vue-jsx-merge-props: 1.0.0
@vue/babel-plugin-transform-vue-jsx: 1.0.0
@vue/babel-preset-app: 3.11.0
@vue/babel-preset-jsx: 1.1.0
@vue/babel-sugar-functional-vue: 1.0.0
@vue/babel-sugar-inject-h: 1.0.0
@vue/babel-sugar-v-model: 1.0.0
@vue/babel-sugar-v-on: 1.1.0
@vue/cli-overlay: 3.11.0
@vue/cli-plugin-babel: ^3.11.0 => 3.11.0
@vue/cli-plugin-eslint: ^3.11.0 => 3.11.0
@vue/cli-service: ^3.11.0 => 3.11.0
@vue/cli-shared-utils: 3.11.0
@vue/component-compiler-utils: 3.0.0
@vue/preload-webpack-plugin: 1.1.1
@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.10
vue-eslint-parser: 5.0.0 (2.0.3)
vue-hot-reload-api: 2.3.3
vue-loader: 15.7.1
vue-style-loader: 4.1.2
vue-template-compiler: ^2.6.10 => 2.6.10
vue-template-es2015-compiler: 1.9.1
npmGlobalPackages:
@vue/cli: Not Found
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:///HelloWrold.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. Is there any way to solve it?
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