Setup SFC doesn't compile development with development flag "_file" when component is process for devtools to show setup function

Xenoha commented 2 years ago

Describe the bug

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

On Viteese: If you just do a build with the standard starting code, 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: If you do a build with the standard starting code. Change 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.

Please let me know if I should submit this issue elsewhere as as always, thank you for the support.

Reproduction

github.com/antfu/vitesse

System Info

System:
    OS: Linux 5.13 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
    Memory: 11.10 GB / 31.20 GB
    Container: Yes
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 14.17.5 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.14 - /usr/local/bin/npm
  npmPackages:
    @vitejs/plugin-vue: ^1.2.3 => 1.6.2 
    vite: ^2.3.6 => 2.5.6

Used Package Manager

pnpm

Logs

See background in Devtools issue https://github.com/vuejs/devtools/issues/1564
See background in Vue Core issue https://github.com/vuejs/core/issues/5365

Per Linus
"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

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

Xenoha commented 2 years ago

Hey there @sodatea , just wanted to follow-up on this issue? Thanks

sapphi-red commented 2 years ago

@Xenoha I think https://github.com/vitejs/vite/pull/4984 fixed this.

Xenoha commented 2 years ago

@sapphi-red

Thanks for the update. I just updated to Vite: 2.3.6 and it looks like I can now see the setup contents. However, I still see my components named as "Anonymous Component" with the 6.1.4 Devtools Version and the "Allow access to file Url's checked.

sapphi-red commented 2 years ago

@Xenoha Have you set __VUE_PROD_DEVTOOLS__ using define like below?

// vite.config.js
export default {
  define: {
    __VUE_PROD_DEVTOOLS__: true
  }
}

Xenoha commented 2 years ago

@sapphi-red

export default defineConfig({ define: { __VUE_PROD_DEVTOOLS__: true, }, plugins: [vue(), windiCSS()], base: './', css: { postcss: { from: undefined } }, build: { chunkSizeWarningLimit: 5000, minify: APP_ENV === 'production' ? 'terser' : false, sourcemap: APP_ENV === 'production' ? false : true, brotliSize: APP_ENV === 'production' ? true : false, terserOptions: { format: { comments: false }, }, watch: APP_ENV === 'production' ? null : { exclude: ['node_modules/**'], include: 'src/**', skipWrite: true, }, }, resolve: { alias: { '@/': new URL('./src/', import.meta.url).pathname } }, });

Xenoha commented 2 years ago

I should add that I still don't have the __file property when running the vm.type command. The property 'setup' is the only one available when selecting an "Anonymous Component."

Moreover, I did a test and used the regular "script" syntax with the name and setup properties. This component shows correctly in the Devtools. It seems very much '__File' referencing when using the new script setup SFC.

haoqunjiang commented 2 years ago

See https://github.com/vuejs/core/issues/5496

Xenoha commented 2 years ago

Thanks @sodatea , I'll follow that issue and see if your update fixes the issue.

vitejs / vite