LWC Local Server says Couldn't find the custom component when I pass attribute using Custom Event from child to Grandparent

Question

Im trying to do a simple operation which is pass an attribute from child to grandparent in LWC using Custom Event where I set the Bubbles and composed attribute to true to pass it through the hierarchy. This I am trying using LWC Local Development on a localhost server. But The LWC Local Server gives the following error "Couldn't find the compiled component. If this component has a dependency on a component in the org or a component in a package in the org, test this component directly in the org."

I am sharing snippets of the code below

ChildComponent Template

<template>
    

    <lightning-layout class="slds-align_absolute-center slds-text-align_center container" multiple-rows>

        <lightning-layout-item size="12">
          <lightning-button variant="brand" label="Click Me" onclick={handleClick}></lightning-button>
            
        </lightning-layout-item>
        </lightning-layout>
    
</template>

Child JS

export default class Childcomponent extends LightningElement {

    myval = "testo";

handleClick(event){

    const cv = this.myval;


this.dispatchEvent(new CustomEvent('myevent',{detail:cv }, {bubbles:true,composed:true}))


}

Parent Template

<template>

    <lightning-layout class="slds-align_absolute-center slds-text-align_center container" multiple-rows>

        <lightning-layout-item size="12">
           <c-child-component onmyevent ={handleEventFromChild}></c-child-component>
            
        </lightning-layout-item>
        </lightning-layout>
    
    
</template>

Parent JS

export default class Parentcomponent extends LightningElement {

    handleEventFromChild(event){
alert('From Parent'+event.detail);

    }


}

GrandParent Template

<template>

    <lightning-layout class="slds-align_absolute-center slds-text-align_center container" multiple-rows>

        <lightning-layout-item size="12">
           <c-parent-component onmyevent ={handleEventfromGrandChild}></c-parent-component>
        </lightning-layout-item>
        </lightning-layout>
    
</template>

GrandParent JS

export default class GrandParent extends LightningElement {


    handleEventfromGrandChild(event){

        alert('From GrandParent'+event.detail);
    }
}

I cannot understand where I am going wrong. I have already set the isExposed attribute to true in the meta xml for all the components. Also is the right way to pass attribute from child to grandparent?

Answer 1

CustomEvent takes only two parameters: the first is the name of the event, the second is its configuration. You must provide detail, bubbles, and composed in this second parameter, as demonstrated here:

this.dispatchEvent(new CustomEvent('myevent',{detail:cv, bubbles:true, composed:true}))

Demo.

As far as the second problem, the demo above worked with minimal modification. Make sure you don't have any typos or missing files in your local workspace. This can cause compilation errors like what you've described.

However, please note that using { composed: true, bubbles: true } isn't recommended; the parent should fire off its own event to pass from the child to the grandparent. The reason why is that using this forces the parent to accept the event as part of its own signature, which means that if child ever changes, then all dependencies of parent must also change, which can be harder to maintain.