Vue3使用<component :is>绑定路由meta布局组件报Invalid VNode错误问询

[Vue warn]: Invalid VNode type: undefined (undefined) 警告表示Vue渲染时无法识别传入的组件类型，拿到的目标组件值为undefined，无法生成合法的虚拟节点，最终导致渲染失败页面空白。

• Vue3 对异步组件的使用有明确格式要求：() => import('xxx.vue')是原始的ES模块动态导入函数，并不是Vue可识别的异步组件实例，直接传给<component :is>时Vue无法解析出正确的组件构造函数，就会判定为非法的VNode类型抛出警告。
• 你当前在路由meta中直接存储了未处理的异步导入函数，没有按照Vue3的要求做异步组件包装，所以触发了该报错。

1. 在路由文件中引入Vue提供的defineAsyncComponent方法，包装异步导入的布局组件：

// router.vue 调整后代码
import { defineAsyncComponent } from 'vue'
// 用defineAsyncComponent包裹异步导入函数
const usLayout = defineAsyncComponent(() => import("../layouts/usLayout.vue"));

const routes = [
  {
    path: "/",
    name: "us",
    component: GenericRouterView,
    meta: { layout: usLayout },
    children: usRoutes,
  }
]

2. 如果你的布局组件不需要做异步拆分，也可以直接改成同步导入，不需要额外包装即可正常使用：

// 同步导入写法，无需defineAsyncComponent
import usLayout from "../layouts/usLayout.vue"

内容的提问来源于stack exchange，提问作者babis95