devtools
devtools copied to clipboard
vuejs
New Vue Script Setup SFC use doesn't always resolve component name resulting in Anonymous Component when using devtools
Version
6.0.0-beta.17
Browser and OS info
Version 93.0.4577.82
Steps to reproduce
App.vue is shown as a "Anonymous Component" when moved to the new Script Setup SFC.
Using the dynamic view pattern of
<component :is="someLayout"> <router-view /> <component/>
The dynamic component and the immediate component within the router are shown as "Anonymous Component" within the Vue devtools component Tree.
I have found other instances were the devtools wasn't able to resolve the file path, but unable to really lock down at this time.
What is expected?
I would expect the resolved file name to be shown as the name of the component instead of the name "Anonymous Component" in the file tree
What is actually happening?
The name "Anonymous Component" is in place of the actual file name in the vue devtools component tree when using the Script Setup SFC
Allow access to file URLs is enabled in the extension details configuration
Please track this PR if you are using vite: https://github.com/vitejs/vite/pull/4984
@Akryum
Sorry for the Delay,
I started another project and it looks okay. After some research, it looks like even the app.vue component is showing up as Anonymous Component. I'm currently using vite 2.4.4 with the latest Beta.20 version of the devtools.
I actually think because I am working from inside a docker container on Ubuntu 20.04 that it is having trouble resolving the path of the files. Do you think that could be it?
I basically load a container through VSCode's remote container extension and start the project from there.
I can provide a reproduction if you want. Would you want to the dockerfile with maybe the basic vite startup app?
Thoughts?
@Akryum steps to reproduce.
start a new application with either vite or viteese
On Viteese: If you just do a build with the the standard flow, then do a "pnpm preview" you will see the devtools and your layout will be Anonymous Component and the Page will be Anonymous Component.
On Vite: Change the the dev script to the following: '"dev": "vite build --watch --mode 'development'" Open up your chrome devtools and note that the Vue devtools should be present as you changed the mode to "production." When reviewing the component structure of the devtools, none router based components show up as Anonymous Component
It looks like root cause is the build flag. When using the build --watch flag, the components using the new Script SFC show as Anonymous. When previewing an app (You might need to change the mode to production), you will see the same issue.
Looks like it's an issue with the component compiler. The devtools uses a development-only property __file added to component definitions when the component is processed.
@Akryum thanks for your response. This ticket is still marked as unable to reproduce, and it sounds like I should talk to the Vue team? I know you work a lot with both teams, should I submit an issue in Vue or in the Vite?
Do you have the __file property on the component options? Try selecting the component then executing $vm.type in the browser console.
@Akryum Thanks to the Vite team. I now have the $vm.type property that contains the setup function with my dev process. I am using Devtools 6.1.4 and the latest Vite release of 2.3.6. However, I still see my components named as "Anonymous Component" with the option "Allow access to file URL's allowed. Do you have any further thoughts?
@Akryum
Hi,
I think i face the same issue. This is what prints $vm.type. And it doesn't feel right : ) Appart from that, the component seems to work well.
@Kostra0ne If the file name is not provided by Vue then the devtools can't guess it :D Looks like it's an issue in core that doesn't expose the file name in the compiled output
@Akryum Yeah i figured 😊 . I have no issue when using regular script but can't make it work with setup. I saw in the doc that i could use a regular script and a default object to expose infos like name, but ... It's failing during git action build. Another issue i guess then 🤦