1

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>

  • can you add code snippet? – Pranay Jaiswal Apr 9 '19 at 8:59
  • do you have errorPanel component created? – salesforce Developer Apr 9 '19 at 9:16
  • I guess you need to create <c-error-panel errors={error}></error-panel> component – salesforce Developer Apr 9 '19 at 9:16
  • Can you explain me more where I need to create this component – Varsha Apr 9 '19 at 9:18
  • 1
    I guess the closing tag must be </c-error-panel> instead of just </error-panel>? – itzmukeshy7 Apr 9 '19 at 12:21
3

The closing tag must match with opening one <c-error-panel> so the closing tag must be </c-error-panel> not just </error-panel>

<template if:true={error}>
    <c-error-panel errors={error}></c-error-panel>
</template>
  • Still I am getting the same error. – Varsha Apr 9 '19 at 13:03
  • 3
    Then I am sure you didn't create this component in your org. – itzmukeshy7 Apr 9 '19 at 13:05
1

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.

1

errorPanel component is one of the components from the LWC Recipes repository. If you get this error, it means, that you have not installed LWC Recipes on your org before. You can easily fix the problem by getting just this one component from LWC repository and deploying it to your org.

0

Set isExposed attibute to true in errorPanel component's metadata xml file.

<isExposed>
true
</isExposed>
  • FWIW, while this has been downvoted (I just reversed one), it did just get some other components to compile for me that wouldn't otherwise, and I know the child component had already been deployed. – Matt Lacey Nov 7 '19 at 10:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.