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

[LinusBorg]

would be even better if we could have a global defineEmits/defineProps etc. without needing import every single time.

The implementation in 3.2 is providing exactly that. Are you already on 3.2.1 ?

[jzs11]

would be even better if we could have a global defineEmits/defineProps etc. without needing import every single time.

The implementation in 3.2 is providing exactly that. Are you already on 3.2.1 ?

I am using Vue 3.2.2 and Vue cli 4.5.13, just tried to do it without defineEmits, however it shows an error

Last night I just keep converting all files to <script setup>, love this syntactic sugar which makes the code base much more easier to read, particular on large SFC. Thanks!

[LinusBorg]

That's an eslint errror. You need to tell eslint that these globals exist.

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