1

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?

1 Answer 1

0

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.

4
  • Now when I changed & deployed the code to Org using vscode as I am trying to drag the grandparent component to the Screen in Lightning App Builder edit mode it gives the following error Action.prototype.finishAction Error [Assertion Failed!: Failed to find definition for dependency: c/parentComponent : undefined Callback failed: serviceComponent://flexipage.editor.aura.component.FlexipageComponentController/ACTION$loadComponentDefinitions] Is this a package or a typo issue? Its really hard to debug LWC.
    – Amax1
    Dec 20, 2022 at 14:29
  • @Amax1 It sounds like c/parentComponent isn't deployed. Check in Setup | Lightning Components to see what's deployed in your org.
    – sfdcfox
    Dec 20, 2022 at 14:34
  • Thanks. It Works now. Yes that was the issue. Also 1 question. The LWC errors are very hard to debug as the errors that appear due to JS issues as "Technical Stuff" are hard to understand. Is there an easier way to debug issues? Like Wrap an LWC in an Aura App and try or any online editor/environment?
    – Amax1
    Dec 20, 2022 at 15:05
  • @Amax1 The local LWC server is easy to debug; just press F12 and go to the Sources tab. Inside Salesforce, enable debug mode (Setup | Debug Mode), and you can see LWC sources there, too. I do all of my debugging in browser, and it's pretty straightforward once you get the hang of it.
    – sfdcfox
    Dec 20, 2022 at 15:06

You must log in to answer this question.

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