Invalid VNode type: undefined (undefined) - when used with <component :is="comp">

Question

I have been stuck on this issue for a while with no information online. using vue 3

• I define a layout component inside my router meta: tag.

• Inside my App.vue I check if a specified route has the layout meta tag, and if so the `component :is="layout" is true.

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

router.vue

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

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

I get this error:

[Vue warn]: Invalid VNode type: undefined (undefined) at UsLayout at App

And nothing is displayed on the screen. Any ideas what this error means / what causes it?

Answer 1

I had this error when I migrated to Vue3 and did not wrap my lazy loaded Async Components in the new helper function defineAsyncComponent.

Error

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

Works

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