Version

3.2.29

Reproduction link

github.com/antfu/vitesse

Steps to reproduce

Pull the repo, or just follow the getting started steps with pnpm. While I provided the vitesse starting repo, you could use the vite repo as well. See the below for details from both project starts paths.

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 "development" When reviewing the component structure of the devtools, none router based components show up as Anonymous Component

What is expected?

The component file name should be visible through the devtools component tree as well as the setup properties.

What is actually happening?

The component is showing up as "Anonymous Component" and the setup method properties are not visible for the component.

Router components are processing fine through the dev tools tree. I submitted an issue on the devtools and the Guillaume Chau gave me the following message.

"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."

I figured since the core team is in control of the render function and processing, this was the place to submit the issue. Let me know if I need to place the issue to the vite team.

Here is the issue on the vue/devtools board. https://github.com/vuejs/devtools/issues/1564#

You will see a screenshot of the issue and some background as I was trying to figure out how to consistently reproduce.

This is an issue with vite's plugin, which only adds this property if the dev-server is running:

https://github.com/vitejs/vite/blob/5306234aad7e7432fb55c6033a63c6cf74493c3f/packages/plugin-vue/src/main.ts?_pjax=%23js-repo-pjax-container%2C%20div%5Bitemtype%3D%22http%3A%2F%2Fschema.org%2FSoftwareSourceCode%22%5D%20main%2C%20%5Bdata-pjax-container%5D#L105-L108

Note we also have ongoing discussions in other issues about how to optimize component name assignment / generation in script setup. (#5218)

Thanks @LinusBorg I submitted this to the Vite team and will keep an eye out on #5218