core: SFC `setup` script does not make imported components available to template with TypeScript + Pug
Version
3.2.2
Reproduction link
https://github.com/spenserblack/setup-script-typescript-and-pug-issue
Steps to reproduce
- Create an SFC with
<template lang="pug">and<script setup lang="ts"> - Import a component
- 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.
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 1
- Comments: 15 (5 by maintainers)
Note: the fix skips the import usage check since with a custom
lang,@vue/compiler-sfcwon’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 withimport type { xxx } from '...'to avoid them from being returned fromsetup()during dev.@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!
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.2Results 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.That’s an eslint errror. You need to tell eslint that these globals exist.