Lightning Web Components – Refer Child Component Name in Parent

I have a child component folder "bCPContractTOP" which has

bCPContractTOP.HTML
bCPContractTOP.js
bCPContractTOP.js-meta.xml

How to call this from parent component. I am getting one error

LWC1010: Failed to resolve entry for module "bCPContractTOP".

<template>
  <div>
    <lightning-input type="text" value={checknameinputvalue} name="CheckName" label="Check Name" required onchange={handleInputChange}></lightning-input>
    <lightning-button label="Generate" title="Generate" class="slds-m-left_x-small" onclick={handleClick} ></lightning-button>
    <c-bCPContractTOP check-name={checkNameValue}></c-bCPContractTOP>
  </div>
</template>

Best Answer

Capital letters become lowercased and prefixed with a hyphen (-), so the name would become:

c-b-c-p-contract-t-o-p

Your code would look like this:

<c-b-c-p-contract-t-o-p check-name={checkNameValue}></c-b-c-p-contract-t-o-p>

This is called "kebab case" in the documentation.

For this reason, it's probably more beneficial to not use so many capital letters in your component name.

Also, the file names are case sensitive--make sure your template is bCPContractTOP.html (lowercase html).

Related Solutions

LWC1010 Error – How to Fix Problem When Failed to Resolve Entry for Module

Looks like LWC references are case-sensitive and they should be referenced in the exact case like following

<aura:component >
    <c:simpleTable/> 
</aura:component>

While if we have Aura component called abc we can reference it in other components or apps as Abc or ABC without any errors, for LWC component this simply doesn't work.

LWC – Fix Passing Value from Child Component to Parent Not Working in Lightning Web Components

You are passing the data in the wrong format.

this.selectedCheck = event.target.checked;
console.log('ChildComp Check'+this.selectedCheck)
const customEventCheck = new CustomEvent("valueCheck", {        
    detail: this.selectedCheck /* here is the problem */
});
this.dispatchEvent(customEventCheck);

It should be like this

this.selectedCheck = event.target.checked;
console.log('ChildComp Check'+this.selectedCheck)
const customEventCheck = new CustomEvent("valueCheck", {        
    detail: { checked: this.selectedCheck } /* here is the correct format */
});
this.dispatchEvent(customEventCheck);

Best Answer

Related Solutions

LWC1010 Error – How to Fix Problem When Failed to Resolve Entry for Module

LWC – Fix Passing Value from Child Component to Parent Not Working in Lightning Web Components

Related Topic