this.template.querySelector(...).handleUpdateCase().then is not a function

Question

Hello,

I develop a parent LWC which calls a method from a child LWC.

Unfortunately, I get this error message:

this.template.querySelector(...).handleUpdateCase().then is not a function

This is the parent LWC:

this.template.querySelector('c-ricba_-q-m_-send-s-m-s').handleUpdateCase()
            .then((data) => {
                
            })
            .catch(error => {
                
            })
            .finally(() => {
                
            })

The child LWC (ricba_QM_SendSMS):

@api
handleUpdateCase() {
    console.log('Hello');
    return {
        ticketId: this.ticketId,
        message: this.message
    };
}

I would like to understand why the method "then" is not a function please (the child LWC is in the HTML file in the parent LWC)? Maybe the error is from something else? I know the child method is called because if I can read the "console.log" in the developer console of the browser.

Thanks

Answer 1

@api
handleUpdateCase() {
    return {
        ticketId: this.ticketId,
        message: this.message
    };
}

You didn't return a Promise or use async, so then isn't a function of the return value. As written, it's just a normal function, so you can write:

let result = this.template.querySelector('c-ricba_-q-m_-send-s-m-s').handleUpdateCase();