Invalid vnode type when creating vnode: undefined.

[zhenzhenChange]

Version

3.2.3

Reproduction link

codesandbox 貌似不支持 script setup？

很抱歉，为了能正确表达我遇到的问题，请原谅我采用中文来叙述问题😂。

Steps to reproduce

Test.vue

---

一切的前提是开启了 lang="ts"

1. 导入的组件如果不是大写开头，则会警告 Invalid vnode type when creating vnode: undefined. ，并且是两次。这点和 SFC setup script does not make imported components available to template with TypeScript + Pug #4312 描述的相似。

2. 如果中间掺杂了其它的东西，也会干扰到组件的解析，这里我是升级了项目里的版本，并且组件名都是大写，我无法排查（而且这个还只是一个登录页，进入系统后控制台就会被这个警告占满，浏览器会卡死，没有办法调试）。

去掉 lang="ts" 或者组件名大写，能正确解析

What is expected?

正确解析组件

What is actually happening?

未正确解析

[HcySunYang]

给个最小重现的项目，可运行的。

[zhenzhenChange]

https://gitee.com/zhenzhenChange/vue-next-issuse-4358 [GitHub 被墙了，推不上]

---

不好意思，久等了。

就像问题描述里的一样，这里的 demo 只是涉及了组件名的大小写以及lang="ts"的问题，到了实际项目里，基本无法排查出其它情况，所以很抱歉，我没办法重现项目中出现的问题（可以确定的是，每个组件名都会是大写的，这是我一直以来的习惯）。

不过我个人人为，这里的问题应该是相通的，关联的，也许搞定了大小写的问题，另外一个也随之搞定

[zhenzhenChange]

• node v14.9.0
• npm v6.14.8
• yarn v1.22.10
• Windows 10
• Google Chrome v92.0.4515.131

[zhenzhenChange]

这个问题貌似存在偶然性，我刚刚又跑了一遍第一张图 Test1.vue 居然又能正常解析了。。

[HcySunYang]

没有重新我们无法给你更多帮助

[zhenzhenChange]

好的，我再尝试一下找找问题所在。

但我想向你确认一点，在<script setup lang="ts">中，导入的组件，命名必须是要大写的对嘛？

[HcySunYang]

不必须大写

[zhenzhenChange]

嗯嗯，好的，谢谢你。

也感谢 @ygj6 的付出。

[ygj6]

@HcySunYang @zhenzhenChange I can reproduce the problem stably in this project: https://gitee.com/zhenzhenChange/vue-next-issuse-4358, so I think it's a bug.

[viceroyliu]

我当前又遇到了这个bug，提示我 Invalid vnode type when creating vnode: undefined. ，并且ThreeAddInvoice组件无法展示。

当我注释掉 FourAddInfo 组件的引用时，才能正常展示，像这样

[zhenzhenChange]

是的，这个问题依然会出现，只不过出现的频率可能就是偶尔一两次，解决的办法就是调整他们的位置、换行、加空行

{
  "dependencies": {
    "vue": "^3.2.20"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.2.20",
    "vite": "^2.6.7"
  }
}

[ygj6]

@wsrfde Could you please provide a minimal reproduction project.

[viceroyliu]

my-code.zip
@ygj6 仅仅能提供这些，package.json和我当前的代码

[ygj6]

Sorry, I could not reproduce the problem, if you can provide a sfc playground project, maybe we can solve the problem more quickly.

[viceroyliu]

@ygj6 https://github.com/wsrfde/bug-code.git 具体查看README，记得及时下载，明天该项目我会删除

[Coderclc]

我也遇到了类似这样的问题,一重启项目就解决了,头疼,经常需要重新run

[ygj6]

我也遇到了类似这样的问题,一重启项目就解决了,头疼,经常需要重新run

最大问题是缺乏稳定复现的repro.:dizzy_face:

[edwardnyc]

我也遇到了类似这样的问题,一重启项目就解决了,头疼,经常需要重新run

最大问题是缺乏稳定复现的repro.😵

• 1

以天为单位的稳定复现. =-=

[ygj6]

以天为单位的稳定复现. =-=

你能提供一个例子吗？使用 sfc.vuejs.org、git、或者gitee。当然最好尽可能的小:smiley:

[Coderclc]

稍等一下,因为我是在vite+vue3的环境下遇到了这个问题,我先排除一下是否与vite有关

[Coderclc]

https://github.com/Coderclc/vue3-vite-test 问题是运行时的问题,既在项目启动以后导入foo这个组件就会有此提示,还遇到一个相似的问题且没有任何提示,既在运行时手动切换img src 绑定的图片,会加载不出来, 同样的这两个问题都是重启即可解决.我不知道这个现象是否应该如此,虽然vite重新启动很快,但开发时经常会感到疑惑

[zhenzhenChange]

看来这个问题已经有越来越多的人出现了，我觉得我应该是首批发现这个偶然性 Bug的人，所以当时提了出来，并且做了大量的测试，但也因为是偶然性，就是有时候出现，有时候不出现，所以确实是真的很难复现，在第一次提供的那个仓库中确实是复现了，当时 @ygj6 也解决了这个问题，后续我也一致的认为完完全全搞定了之后（复现仓库也删了。。不过即使没删，现在估计也测试不出来），再过了一段时间，还是会出现，只不过那时候频率非常低，经常修改代码之后，经过了热更新，Bug又消失了，所以我也就没有反馈了。

---

我觉得我在这个问题上有一定的发言权：

1. 为什么说我觉得我应该是首批发现这个偶然性 Bug的人呢？
   因为从Script-Setup语法糖还在实验阶段的时候，我就一直在用这个语法糖，Bug出现之后，当时经过的测试（可以看这个问题的描述），基本上可以猜测，是语法糖和lang="ts之间有了什么冲突？
2. 从什么时候开始的呢？
   我翻出了我开发公司项目的提交记录：
   
   

此时应该注意，可能是当时v3.2.0版本中，修改了什么东西，才导致的这个bug的出现，然后就会导致组件无法渲染。（之后就是有了这个issuse，发了3.2.4版本修复）

至于为什么现在这么多人出现了呢？就是越来越多的人使用Script-Setup语法糖啦~我前面第一点也提了可能跟语法糖和ts之间有关联，大家也可以回想一下，是不是使用了这个语法糖才出现的这个问题？

[Coderclc]

@zhenzhenChange
I was triggered stably under the condition of vite + ts + syntactic sugar hot update, which caused me to restart every time I introduced a component.
But when I switch the demo to defineComponent, the following problems disappear

1. Invalid vnode type when creating vnode: undefined.
2. The imported image resource cannot be loaded by manually switching the src (requires restart to load)
   It seems that it is caused by syntactic sugar. I read the official website https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineexpose,
   It should be that hot update is related to running side effects or the number of creation executions. I hope that this problem can be solved later. Syntactic sugar is still very cool to use. 233

[ygj6]

Oh, I finally understand what the problem is. When we use lang = 'ts' in script setup.
Vue deletes unused imports. In this case, when we update the template, hmr only updates the template.
So the exact reproduction procedure is this.

• download sfc.vuejs.org
• starting program
• <!-- <Item/> --> Change to <Item/>
• warn appeared