3

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>
</template>
10
  • can you add code snippet? Commented Apr 9, 2019 at 8:59
  • do you have errorPanel component created? Commented Apr 9, 2019 at 9:16
  • I guess you need to create <c-error-panel errors={error}></error-panel> component Commented Apr 9, 2019 at 9:16
  • Can you explain me more where I need to create this component
    – Varsha
    Commented Apr 9, 2019 at 9:18
  • 1
    I guess the closing tag must be </c-error-panel> instead of just </error-panel>? Commented Apr 9, 2019 at 12:21

8 Answers 8

6

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.

4

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
    Commented Apr 9, 2019 at 13:03
  • 5
    Then I am sure you didn't create this component in your org. Commented Apr 9, 2019 at 13:05
2

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

<isExposed>
true
</isExposed>
2
  • 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
    Commented Nov 7, 2019 at 10:07
  • isExposed = true parameter is to exposed to Lightning App Builder or Experience Builder, no need to change this parameter.
    – hendra
    Commented Aug 29, 2023 at 4:35
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.

1

Just note for anyone else getting this error message. It's also possible to get this error when you have a selector for a component that doesn't exist in your CSS file.

Look for selectors missing the period class selector and trying to select an element that doesn't exist.

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)
0

You should upload your component you are referencing to the org first.

For example, let's say I have a LWC called Measurement and another one called Caliberation, where I am using Caliberation component in my Measurement LWC. Then, I should deploy Caliberation LWC first to the org, before deploying Measurement LWC, which contains Caliberation component.

Example: caliberation.html

<p> Hello </p>
<c-caliberation></c-caliberation> // caliberation is my component name.
<p> I am caliberation </p>

You should deploy your caliberation lwc first to the org before you upload, your another component which is using, this component.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .