Vue 3 报错 Invalid vnode type when creating vnode: undefined

发生背景

用 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]' />

显然，会报错。

所以，这个问题的根源在于命名冲突。