Can't capture lwc dispatched event in parent aura component

Question

I have a custom lwc component embedded inside another custom aura component.

This lwc dispatches custom event with data for aura to retrieve and process but I can't get any info although it's capturing the event.

customlwc.js

handledataChange(event){
    this.dispatchEvent('handleResponse', { message : event.detail.value });
}

customaura.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction">
    <c:customlwc onhandleResponse="{!c.handleResponse}"/>
</aura:component>

customaura.js

({
    handleResponse: function(component, event, helper) {
        console.log(event.getParam('message')) //this displays undefined
    },
})

Is there something I'm missing or isn't this the proper way to retrieve event info?

EDIT (added lwc code for event launch)

 @wire (getInitialInfo, {recordId : '$recordId'}) wiredGetInitialInfo ({error, data}){
    //Data
    if(data){
        //Success
        if(data.success){
            this.dispatchEvent(new CustomEvent('handleSCResponse', { message : 'Operation completed successfully' })); 
        }
        //Error
        else{
            //for enclosing aura 
            this.dispatchEvent(new CustomEvent('handleSCResponse'), { message : 'Error found '});
        }
    }
    //Error
    else if(error){
        this.dispatchEvent(new CustomEvent('handleSCResponse'), { message : 'Unexpected error' });
    }
}

Answer 1

Your event name does not match here.

<c:customlwc onhandleResponse="{!c.handleResponse}"/>

You are firing event with name = handleSCResponse, so you need to prefix on to your event name, ex onhandlescresponse. The corrected code of handling it from the parent component is below.

<c:customlwc onhandlescresponse="{!c.handleResponse}"/>

---

So in detail, this is how you fire an event.

const eventName = 'onhandlescresponse';
const event = new CustomEvent(eventName, {
    detail: { message: 'Operation completed successfully' }
});
this.dispatchEvent(event);

This is how you handle it.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction">
    <c:customlwc onhandlescresponse="{!c.handleResponse}"/>
</aura:component>

Although it is supported in the aura parent, its recommended to give the lowercase name for an event.

Answer 2

There are some changes you need to do:

1) The name of the event should always be in small letters.[ handleResponse -> handleresponse]

2) For firing the event write -

this.dispatchEvent(new CustomEvent('handlescresponse'),  {
        detail: { message: 'Unexpected error.' }
    });

For more information see section "Sending Events to an Enclosing Aura Component" in - https://trailhead.salesforce.com/en/content/learn/modules/lightning-web-components-for-aura-developers/communicate-with-events

Answer 3

Use this code in place of your aura component

While creating custom event use following: Because we can't use capital letters in the name of the event, so use this code to dispatch events.

this.dispatchEvent(new CustomEvent('handlescresponse', { message : 'Operation completed successfully' }));

then for handling event use following code

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction">
    <c:customlwc onhandlescresponse="{!c.handleResponse}"/>
</aura:component>

Hope this works fine

Answer 4

Link to Documentation

If you need to send a primitive type and not a complex object in the event detail, another approach is something like this-

handledataChange(event){
    let message = event.detail.value;
    this.dispatchEvent('handleResponse', { detail : message });
}

The rest of the Aura code will work as is.

Doing something like this also works-

this.dispatchEvent('handleResponse', { detail : {message : event.detail.value } );

In both the cases, event.getParam('message') should give you the value in Aura.