Unable to call Child LWC from Parent

Question

I have a child LWC named

pCom_PANS

I want to call it in another LWC,So I tried the snippets

<c-p-com-pANS></c-p-com-pANS> <c-pCom-PANS></c-pCom-PANS> <c-p-com_PANS></c-p-com_PANS>

But none of them seems to work all throwing deploy error

force-app\main\default\lwc\lWC_OnboardingProcess\lWC_OnboardingProcess.js No MODULE named markup://c:pComPans found : [markup://c:lWC_OnboardingProcess]

The child component is presnt in the target Org. Is there anything where I am going wrong?

Answer 1

You need to put a hyphen before each capital letter in the source file name, then lowercase the letter. For your component name, the markup would appear as:

<c-p-com_-p-a-n-s></c-p-com_-p-a-n-s>

You may want to choose a more practical name for your component, as this name would be frustrating to use.

You can read more about the naming rules.

Use camel case to name your component myComponent. Camel case component folder names map to kebab-case in markup. In markup, to reference a component with the folder name myComponent, use <c-my-component>.