无效的 VNode 类型：未定义（未定义）- 与 <component :is="comp"> 一起使用时

Question

我被这个问题困扰了一段时间，网上没有任何信息。使用 vue 3

• 我在路由器meta:标签内定义了一个布局组件。

• 在我的内部App.vue，我检查指定的路线是否具有布局元标记，如果有，则 `component :is="layout" 为 true。

应用程序.vue

<template>
  <component :is="layout">
    <router-view />
  </component>
</template>

<script>
  computed: {
    layout() {
      let layout = null;
      for (const match of this.$route.matched)
        if (match.meta && match.meta.layout) layout = match.meta.layout;
      if (layout) return layout;
      return "div";
    },
}
</script>

路由器.vue

const usLayout = () => import("../layouts/usLayout.vue");

    {
      path: "/",
      name: "us",
      component: GenericRouterView,
      meta: { layout: usLayout },
      children: usRoutes,
    },

我收到此错误：

[Vue warn]: 无效的 VNode 类型: 未定义 (undefined) at UsLayoutatApp

并且屏幕上什么也没有显示。任何想法这个错误意味着什么/是什么原因导致它？

Answer 1

当我迁移到Vue3并且没有将我的延迟加载包装Async Components在新的辅助函数中时，我遇到了这个错误defineAsyncComponent。

错误

const PdfViewer = () => import('@frontend/components/pdf-viewer.vue')

作品

const PdfViewer = defineAsyncComponent(() => import('@frontend/components/pdf-viewer.vue'))