SFC setup script does not make imported components available to template with TypeScript + Pug

[spenserblack]

Version

3.2.2

Reproduction link

https://github.com/spenserblack/setup-script-typescript-and-pug-issue

Steps to reproduce

1. Create an SFC with <template lang="pug"> and <script setup lang="ts">
2. Import a component
3. Use component in template

What is expected?

Imported component is rendered.

What is actually happening?

Imported component is not rendered, receive warning

[Vue warn]: Invalid vnode type when creating vnode: undefined

---

This seems to happen specifically when TypeScript and Pug are used together. As you can see in the reproduction, when <template> <script setup lang="ts">, component renders, and when <template lang="pug"> <script setup>, component renders. Only <template lang="pug"> <script setup lang="ts"> seems to cause the issue.

[jzs11]

I have facing a similar issue with vuedraggable ^4.0.3

Regardless this little problem, it is still one of the best feature Vue provides, would be even better if we could have a global defineEmits/defineProps etc. without needing import every single time. 😀

[oliverzy]

I have facing a similar issue with vuedraggable ^4.0.3

Regardless this little problem, it is still one of the best feature Vue provides, would be even better if we could have a global defineEmits/defineProps etc. without needing import every single time. 😀

I've encountered the similar issue with vue-draggable.
But I've found a workaround. Make your import Uppercase!

I think it's a bug introduced in 3.2.0-beta.5

[jzs11]

I have facing a similar issue with vuedraggable ^4.0.3



Regardless this little problem, it is still one of the best feature Vue provides, would be even better if we could have a global defineEmits/defineProps etc. without needing import every single time. 😀

I've encountered the similar issue with vue-draggable.
But I've found a workaround. Make your import Uppercase!

I think it's a bug introduced in 3.2.0-beta.5

Verified, after changing to the upper case, it works for me. Thanks!

[njzzzz]

same issue +1

[HcySunYang]

Results of preliminary investigation, the AST that lives in the resolveTemplateUsageCheckString function represents a template that has not been processed by pug, so the imported component is checked as not being used in the template, i.e. isUsedInTemplate is always false.

[mbtcg]

In my project this problem only occurs in dev mode and work without problem in production build

[joostdelange]

I wanted to give my 2 cents on this issue since I was about to create one myself.
This issue does not only occur when using script <setup> TypeScript + Pug, for me this happens when using it with just Typescript (<script setup lang="ts">), without Typescript it works like expected.

And like @mbtcg says above is the case for me too, after build everything is working correctly.

Error: [Vue warn]: Invalid vnode type when creating vnode: undefined.
Vue version: 3.2.2

[cutsin]

Same issue in new scaffold with yarn create vite + ts but no Pug used.

Error: [Vue warn]: Invalid vnode type when creating vnode: undefined.
Vue version: 3.2.x

[joostdelange]

@cutsin Did you test it with all 3.2.x versions? Downgrading to version 3.2.1 resolved the issue for me, while downgrading to 3.2.0 did not.

[yyx990803]

@cutsin @joostdelange if your issue is not related to pug, please open a separate issue with your own reproduction since they are likely not the same problem. It doesn't help if we can't see the code of your components!

[yyx990803]

Note: the fix skips the import usage check since with a custom lang, @vue/compiler-sfc won't be able to reliably analyze the template to determine whether an import is used in the template or not. This means if you are using Pug or other template pre-processors with <script setup> + TS, you will need to explicitly import types with import type { xxx } from '...' to avoid them from being returned from setup() during dev.

[spenserblack]

Thank you for the fix! 🎉

This means if you are using Pug or other template pre-processors with <script setup> + TS, you will need to explicitly import types with import type { xxx } from '...' to avoid them from being returned from setup() during dev.

Because of this, would it be recommended to avoid template pre-processors when using <script setup> + TS?