Dispatched event not firing in parent aura component

Question

I am following this guide to communicate between my LWC and my aura component. But for some weird reason it still doesnt work.

myComponent.cmp

<aura:component implements="force:hasSObjectName,lightning:actionOverride" >    
    <ui:scrollerWrapper class="scrollerSize" aura:id="scrollerTop">
        <!-- Other code -->
    </ui:scrollerWrapper>
    <!-- My test Lightning Web Component -->
    <c:helloworld onfilterchange="{!c.handleEvent}"/>
</aura:component>

myComponentController.js

({
    handleEvent: function(component, event, helper) {
        console.log("BACK!");
    }
});

helloworld.js

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
    constructor(){
        super()
        window.addEventListener("message", this.fireEvent, false, {
            once: true
        });

    }



    fireEvent(event){
        const filterChangeEvent = new CustomEvent('filterchange', {
            detail: { "HELLO": 'TEST' }
        });
        try{
            var data = JSON.parse(event.data);
            if(data.ap_mobile){

                // Fire the custom event
                this.dispatchEvent(filterChangeEvent);
                console.log("Event Fired!");
            }
        }catch(error){
            console.log("Error Parsing");
        }
    }
}

The Event Fired! text is shown but thats it, the controller doesnt fire the handleEvent function at all.

What am I doing wrong?

Answer 1

As another possible issue, you have a naming convention error.

LWC automatically forces the LWC Class name to Pascal Case, but you have a dueling format right now:

• LWC class of HelloWorld <- this is Pascal Case

• LWC JS of helloworld.js <- This is not, it should be helloWorld, capital W.

• Template of helloworld.html (embedded in aura)

I just tried this and it works fine, notice the naming convention of the LWC file and its class. Everything is lowercase.

helloworld.js

import { LightningElement } from 'lwc';

export default class Helloworld extends LightningElement {
  connectedCallback() {
    const payload = {
      "hello": "test"
    }
    this.dispatchEvent(
      new CustomEvent('filterchange', {
        detail: { payload }
      })
    );
  }
}

AuraListener.cmp

<c:helloworld onfilterchange="{! c.handleChange }"></c:helloworld>

AuraListenerController.js

handleChange : function(component, event, helper) {
  let payload = event.getParam("payload");
  console.log(payload.hello) // outputs test
}

Answer 2

The issue was where I was creating the event from

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
    constructor(){
        super()
        window.addEventListener("message", this.fireEvent, false, {
            once: true
        });

    }
}

Should be...

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
    connectedCallback(){
        super()
        window.addEventListener("message", this.fireEvent, false, {
            once: true
        });

    }
}