How to better debug this warning? [Vue warn]: Failed to resolve component: ion-card-header

Ionic Framework Ionic Vue
1

Hello all,

I am currently writing a sample application based on the side menu split-pane starter template: https://github.com/ionic-team/starters/blob/c70fe6668b792288cbe9e3c1072733c5bc99d2e0/vue/official/sidemenu/src/App.vue

I have removed much of the original content to give myself a more blank slate. I wanted to display a series of card components in the main screen, so I created a new component called MenuItemCard.

MenuItemCard.vue

<template>
    <ion-card class="menuCard">
        <img :src="imageURL" />
        <ion-card-header>
            <ion-card-subtitle>{{ price }}</ion-card-subtitle>
            <ion-card-title>{{ name }}</ion-card-title>
        </ion-card-header>
        <ion-card-content>
            {{ description }}
        </ion-card-content>
    </ion-card>
</template>

This is rendered in the main view (this is folder.vue in the example), but a warning displays in the console.

Error:

[Vue warn]: Failed to resolve component: ion-card-header 
  at <MenuItemCard key=1 name="abcde" price=123  ... > 
  at <Anonymous fullscreen=true > 
  at <IonPage isInOutlet=true registerIonPage=fn<registerIonPage> > 
  at <Menu ref=Ref< undefined > key="/folder/Inbox" isInOutlet=true  ... > 
  at <IonRouterOutlet id="main-content" > 
  at <Anonymous content-id="main-content" > 
  at <IonApp> 
  at <App>

image
image1038×244 42.4 KB

This error is repeated for each time the component is rendered. I am not able to identify what <menu > is in this context, it is not displayed in the elements on the page (which might make sense if it didn’t render).

The MenuItemCard component does not have ref imported because the component doesn’t use it (that im aware of, not that i wrote).

However, if i do import ref, and dont use it (which does show a linting type issue)

The Menu component mentioned in the error above, will then show a Proxy object as the value, rather than an undefined value.

<Menu ref=Ref< Proxy {…} > key="/folder/Inbox" isInOutlet=true ... >

So my questions are really:

  1. How can I better understand what this menu item is? It would be helpful if the Ionic component documentation maybe linked to the component source. I’m going to go in search of that next maybe.

  2. Is there some requirement for using the ion-card that I am missing?

  3. Though the error is ocurring at the component, it may be related to the folder.vue page? As the card component should have no menu in it.

Finally I’ll leave the template for the folder.vue page which loads in the MenuItemCards

  <ion-page>
    <ion-header translucent="true">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>title</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
<!-- Not actually sure where this secondary header is used/shown, came from example. -->
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Title</ion-title>
        </ion-toolbar>
      </ion-header>

      <div id="container">
        <menu-item-card v-for="item in menuItems" v-bind:key="item.id" :name="item.name" :price="item.price" :description="item.description" :imageURL="item.imageURL"></menu-item-card>
      </div>
    </ion-content>
  </ion-page>

Thank you.

1 Like
2

it just means that you haven’t included the component in the components section of the vue component.

So you need to import it AND and it to the components

<script lang="ts">
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonButton,
  IonItem,
  IonContent,
  IonCard,
  IonCardContent,
  IonCardHeader,  // <== HERE
  IonInput,
} from "@ionic/vue";
import { defineComponent, computed, ref } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  name: "Home",
  components: {
    IonPage,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonButton,
    IonItem,
    IonContent,
    IonCard,
    IonCardContent,
    IonCardHeader, ,  // <== AND HERE
    IonInput,
  },
1 Like
3

You were correct :+1: thank you. Do you know of any good browser debugging tools? Looks like VueTools does not recognize the app as Vue in the browser.

4

But understand the question? It shows up with the latest vuedevtools