core: Invalid vnode type when creating vnode: undefined.

Version

3.2.3

Reproduction link

codesandbox 貌似不支持 script setup？

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

Steps to reproduce

Test.vue

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

导入的组件如果不是大写开头，则会警告 Invalid vnode type when creating vnode: undefined. ，并且是两次。这点和 #4312 描述的相似。

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

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

What is expected?

正确解析组件

What is actually happening?

未正确解析

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 24 (9 by maintainers)

Commits related to this issue

feat(compiler-sfc): expose properties for more accurate HMR ref #4358 reverts #4908 — committed to vuejs/core by yyx990803 3 years ago
fix(plugin-vue): fix hmr issue in vuejs/vue-next#4358 — committed to vitejs/vite by yyx990803 3 years ago
fix(plugin-vue): fix hmr issue in vuejs/vue-next#4358 — committed to vitejs/vite-plugin-vue by yyx990803 3 years ago

Most upvoted comments

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
 Change to <Item/>
warn appeared

ygj6 on Nov 5, 2021

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

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

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

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

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

zhenzhenChange on Nov 4, 2021

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

ygj6 on Aug 17, 2021

@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

Invalid vnode type when creating vnode: undefined.
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

Coderclc on Nov 5, 2021

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

Coderclc on Nov 4, 2021