Vue Component Type Build Error with __VUE_PROD_DEVTOOLS__ in Vite

[Coreight98]

Vue version

3.4.3

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-guabna1b?file=vite.config.ts&file=src%2Fcomponents%2FDynamicComponent.vue&terminal=dev

Steps to reproduce

• In tsconfig.json, set the verbatimModuleSyntax option to false, and use the Component type without explicitly specifying type in the import statement.
• In vite.config.ts, declare the __VUE_PROD_DEVTOOLS__ flag as 'false'.

What is expected?

The build should work correctly regardless of whether the import type statement is used.

What is actually happening?

In the vite.config.ts file, when the __VUE_PROD_DEVTOOLS__ flag is declared, a build error occurs if you use Vue's Component type without explicitly specifying the type in the import statement.

System Info

Any additional comments?

No response

[yangxiuxiu1115]

vue only exports the Component's type definition, there is no associated class or method implementation, if you set verbatimModuleSyntax: false, it does cause the problem you mentioned. I think this might be as expected though?

I haven't found a role for VUE_PROD_DEVTOOLS in this, it seems to fail to package/render whether the VUE_PROD_DEVTOOLS value is set or not

[Coreight98]

vue only exports the Component's type definition, there is no associated class or method implementation, if you set verbatimModuleSyntax: false, it does cause the problem you mentioned. I think this might be as expected though?

I haven't found a role for VUE_PROD_DEVTOOLS in this, it seems to fail to package/render whether the VUE_PROD_DEVTOOLS value is set or not

Since our company project is private, I created a new project on StackBlitz to help explain the issue!
When I reproduced the problem locally, rendering worked correctly, but on StackBlitz, an error occurred during rendering.
(After trying again in a new project, it turns out that the issue indeed occurs during rendering!
In that case, it seems more like a problem with @vitejs/plugin-vue related to the VUE_PROD_DEVTOOLS flag, rather than an error in Vue itself.)

In the local environment, the build works fine if the VUE_PROD_DEVTOOLS flag is not defined, but if the flag is defined, an error occurs.

What’s strange is that the default value of VUE_PROD_DEVTOOLS is false, yet defining it as the same 'false' causes an error.

So, I thought it might be related to VUE_PROD_DEVTOOLS, which is why I decided to raise an issue.

[jh-leong]

Thanks for the report.

The issue is caused by vite-plugin-vue incorrectly parsing __VUE_PROD_DEVTOOLS__: 'false' as true. I'm working on a fix here: vitejs/vite-plugin-vue#545.

Additionally, the root cause in this case relates to the non-inline mode compiler: minimal reproduction.