0

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>

10
  • 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>
2
  • Still I am getting the same error. – Varsha Apr 9 '19 at 13:03
  • 4
    Then I am sure you didn't create this component in your org. – itzmukeshy7 Apr 9 '19 at 13:05
3

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

<isExposed>
true
</isExposed>
1
  • 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
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.

1

One thing I've noticed, in VSCode at least, is how you deploy the LWC files can make a big difference. I was using the right-click "deploy this source to org" menu option on an *.js file in the LWC bundle and getting this error.

Moving over into the Explorer panel and right-clicking on the folder for that component worked as expected. All the files (html, js, js-meta.xml) went on their merry way with no errors.

I could have sworn at some point deploying from any individual file sent the whole LWC on it's way, but today that wasn't the case for me.

0
  1. Make sure you've "errorPanel" Component available.
  2. Closing tag should match opening tag i.e.
  3. Make sure Exposed is TRUE (Not needed but precautionary)

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.