[SalesForce] Error with Events lwc – [NoErrorObjectAvailable] Script error

I'm trying to implement a small use case of CustomEvent() in lwc and it's not working. I have implemented custom events in past and I'm not sure what I missed here.

Child Comp:

HTML: 

<template>
    <lightning-card title="Child">
        <div class="child">
            <button class="slds-button slds-button_brand" onclick={handleClick}>Click Me!! </button>
        </div>
    </lightning-card>
</template>

JS:

import { LightningElement } from 'lwc';

export default class ChildCompDispatch extends LightningElement {
    sGreetingToParent = 'Hello, Welcome to Events!! ';
    handleClick(){
        const pressedEvent = new CustomEvent('press',{detail : this.sGreetingToParent});
        this.dispatchEvent(pressedEvent);
    }
}

Parent Component

HTML

<template>
    <lightning-card title ="Parent">
        <div class="Parent" if:true={bShowGreeting}>
            <p ><b>{sGreeting}</b></p>
        </div>
        <div>
            <c-child-comp-dispatch onpress={showgreeting}></c-child-comp-dispatch>
        </div>
    </lightning-card>
</template>

JS

import { LightningElement } from 'lwc';

export default class ParentCompHandle extends LightningElement {
    bShowGreeting = false;
    sGreeting = '';
    showGreeting(event){
        this.bShowGreeting = true;
        this.sGreeting = event.target.detail;
    }
}

It's a pretty simple and straight-forward component. Not sure what's missing here. Anyone?

Best Answer

for your event there is no event.target so you are receiving this error. You should instead change to event.detail and use your detail. I would suggest restructuring the event that you are sending however to be: 

this.dispatchEvent( new CustomEvent( 'press', { detail: { value: this.sGreetingToParent }} )

and then access it in your method by getting event.detail.value as you have now set this with a key for the attribute that you wish to receive. just assigning event.detail with the value will set detail to an object and the key would not exist for what you wish to receive.

also as mentioned in another response here, you should make sure that your javascript expressions match the case for their usage:

showGreeting is not the same as showgreeting. Javascript being case sensitive, you will want to have your onpress={showGreeting}

You may also consider some checks in place too in your method that shows the greeting, there are two ways to do it. One is new, one is old.

Old: 

this.sGreeting = ( event && event.detail && event.detail.value ) || '';

New: (not as widely supported in all browsers yet)

this.sGreeting = event?.detail && event?.detail?.value
Related Topic