Webpack: Tip: Component names should be unique for better debugging experience

[dtsao]

Don't do this:

├───components
│   │
│   └─────A
│   │             PageA.vue
│   │             MyComponent.vue
│   └─────B
│   │             PageB.vue
│   │             MyComponent.vue <-- duplicate name

Code from B/MyComponent will work, but the Chrome debugger may show the code for
A/MyComponent when you are trying to debug B/MyComponent. (MyComponent.vue will only show up once in the devtools Sources pane.)

All component names should be unique to make debugging easier.

Do this:

├───components
│   │
│   └─────A
│   │             PageA.vue
│   │             MyComponentA.vue
│   └─────B
│   │             PageB.vue
│   │             MyComponentB.vue <-- unique name

Any one else run into this? I'd love to see more tips and tricks for debugging in Chrome when developing using the webpack dev server.

[LinusBorg]

Better yet: provide a name: for each component.

Eslint-plugin-vue can help you remind you.

Not meaning to play the bad parent, but conversations like this are better suited for forum.vuejs.org or chat.vuejs.org

[dtsao]

Thanks @LinusBorg for the suggestion. FYI - I assigned a unique name: for the components with duplicate file names, but Chrome's sources tab still shows only one MyComponent.vue entry when expanding webpack:// folder. The debugger displays the file name, not the name from the name: attribute. The code runs OK, but I can't use the debugger in the second instance of the component with the same file name.

[bt404]

use eval-source-map instead of cheap-module-eval-source-map when setting devtool