[SalesForce] No MODULE named markup://c:errorPanel found : [markup://c:contactComponent]

I created one lightning web component to display the records of contact object and using wire decorator to get data from my salesforce org. I am getting this error:

No MODULE named markup://c:errorPanel found : [markup://c:contactComponent]

Please help me out to resolve this error. Here is my code.

Apex Controller

public with sharing class ContactComponentController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactList() {
        return [SELECT Id, Name, Title, Phone, Email FROM Contact LIMIT 10];
    }
}

JS

import { LightningElement, track, wire } from 'lwc';
import getContactList from '@salesforce/apex/ContactComponentController.getContactList';

export default class ContactComponent extends LightningElement {
    @track contacts;
    @track error;

    @wire(getContactList)
    wiredContacts({ error, data }) {
        if (data) {
            this.contacts = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.contacts = undefined;
       }
    }
}

HTML

<template>
<lightning-card title="ApexWireMethodToFunction" icon-name="custom:custom63">
    <div class="slds-m-around_medium">
        <template if:true={contacts}>
            <template for:each={contacts} for:item="contact">
                <p key={contact.Id}>{contact.Name}</p>
            </template>
        </template>
        <template if:true={error}>
            <c-error-panel errors={error}></error-panel>
        </template>
    </div>
</lightning-card>

Best Answer

The Salesforce example references the error panel component (c-error-panel) However, this is not a standard component.

In order to fix this create a new component called errorPanel with the following.

errorPanel.html

<template>
  <template if:true={errors}>
    status: {errors.status}<br />
    statusText: {errors.statusText}<br />
    <template for:each={errors.body} for:item="error">
      statusText: {error.message}
    </template>
  </template>
</template>

errorPanel.js

import { LightningElement, api } from 'lwc';

export default class ErrorPanel extends LightningElement {
  @api errors;
}

This is a basic error component. Customization can be added as needed.

Related Topic