Vue 3 报错 Invalid vnode type when creating vnode: undefined
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
发生背景
用 Nuxt3 正常写 SFC。
相关代码
<script lang="ts" setup>
:
import { Message } from '@arco-design/web-vue';
import { GuildCredit } from '...';
// ...
const data: Ref<GuildCredit[]> = ref([]); // Nuxt3 自动导入 Vue API
//...
function handleAdd() {
// ...
Message.success('添加成功');
}
onMounted(async () => {
// ...
});
<template>
:
<!-- Nuxt3 同样自动导入一些组件。 -->
<AList :data='data'>
<template #item='{ index }'> <!-- index 是当前渲染的元素下标 -->
<AListItem>
<GuildCredit v-model='data[index]' /> <!-- 业务组件 -->
</AListItem>
</template>
</AList>
报错信息
[Vue warn]: Invalid vnode type when creating vnode: undefined.
at <ListItem>
at <Scrollbar ... >
at <Spin ... >
at <List ... >
at ...
解决方案
在 <script lang="ts" setup>
中:
- import { GuildCredit } from '...';
+ import type { GuildCredit } from '...';
发生原因
Nuxt3 自动导入组件 GuildCredit
,但我显式导入了一个 interface GuildCredit
,所以自动导入被覆盖了。
而 TS 的 interface 编译成 JS 后就删除了,导致 GuildCredit
不存在了,取到 undefined
。等价于:
<component :is='undefined' v-model='data[index]' />
显然,会报错。
所以,这个问题的根源在于命名冲突。
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)