Lightning Web Component is the new way of building Lightning Components in Salesforce. There are high chances that you may end up with some common error. We are going to list 5 common errors in Lightning Web Component.
Custom Event Name in Lightning Web Componen
You must pass custom event type name while creating and dispatching it in Lightning Web Component. The event type name should follow these rules:-
- No uppercase letters
- No spaces
- Use underscores to separate words
| Wrong Event Type Name | Right Event Type Name |
| buttonClick | buttonclick |
| Message Received | messagereceived |
| message_received | messagereceived |
// Creates the event with the contact ID data.
const selectedEvent = new CustomEvent('youreventname');
// Dispatches the event
this.dispatchEvent(selectedEvent);Calling a Lightning Web Component inside another Lightning Web Component
Use camel case to name your component. Camel case component folder names map to kebab-case in markup. The question is what you can do wrong? Let’s take an example. Create a Lightning Web Component with name helloLWC. Now create another Lightning Web Component and try to call helloLWC inside it.
People might be mistaken while calling helloLWC inside parentLWC. You might be doing wrong like this:-
<template>
<c-hello-lwc></c-hello-lwc>
</template>When you try to deploy, You will see:-
The right way to call any Lightning Web Component is always convert the names in camel case to kebab-case. So helloLWC is having three upper case letter so each time you encounter a upper case letter, you need to convert it into lowercase and add – before it.
<template>
<c-hello-l-w-c></c-hello-l-w-c>
</template>Access Elements the Custom Owns
Lightning Web Component gives you the ability to query the elements it owns. Let’s take a situation where you have same component called twice. You want to access both the components in JavaScript side. See below code:-
<template>
<!--First child component-->
<c-child-component><c-child-component>
<!--Second child component-->
<c-child-component><c-child-component>
</template>People might end up with using this.template.querySelector(‘c-child-component’); but it does return only one component. To get all the child component, You need to make use of this.template.querySelectorAll(‘c-child-component’); It returns you all the child component with name childComponent.
Lightning Web Component is not available in Lightning App Builder
You might have deployed a Lightning Web Component to your Salesforce Org and trying to add it on Lightning Page. There are various kind of Lightning Pages like Home Page, App Page, Record Pages etc. let’s say you are going to add deployed Lightning Web Component on Home page but it is not available to add in Lightning App Builder. What could went wrong?
There might be two things-
- The component has not been exposed to target Lightning Pages in meta-xml file. Make sure you have exposed the component to target lightning page.
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>- You might be using masterLabel attribute in meta-xml with a different name than your component name. The below component meta-xml file has masterLabel value as Best Component Ever. You should look for this name in Lightning Web Component.
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>49.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>Best Component Ever</masterLabel>
<description>This is a demo component.</description>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>connectedCallback Vs renderedCallback
Aura has onload handler called init but coming to Lightning Web Component, People always wonder what should they use between connectedCallback and renderedCallback. To make it clear, connectedCallback is the right lifecycle hook which fires on load of the component. Coming to renderedCallback, It can fire multiple times as Called after every render of the component.
