2

I would like to call an async function on a child component from its parent. This works the first time I call the function, but the second time, I get a "Sorry to interrupt" error with this:

Uncaught Error: Access denied: {"from":{"namespace":"c"},"to":{"namespace":"default"}} throws at https://curious-badger-87gp21-dev-ed.lightning.force.com/auraFW/javascript/kHqYrsGCjDhXliyGcYtIfA/aura_prod.js:4:34395

This problem doesn't seem to occur when I do this in the LWC playground. It only seems to occur in an actual org, where I'm using an Aura app as a container.

My true use case (more like this Playground example) is around modals and wanting something that's almost as easy and flexible to use as window.confirm(), but a proper modal. To reproduce the issue, you don't need modals or anything -- just a basic async function on a child component with the @api decorator, and something that calls it.

<!-- parent.html -->
<template>
    <c-child></c-child>
    <lightning-button 
        label="Click me"
        onclick={handleClick}>
    </lightning-button>
</template>
// parent.js
import { LightningElement } from 'lwc';

export default class Parent extends LightningElement {

    handleClick() {
        this.template.querySelector('c-child')
            .testMe()
            .then((response) => {
                console.log(response);
            });
    }

}
// child.js
import { LightningElement, api } from 'lwc';

export default class testChild extends LightningElement {

    @api
    testMe = async() => {
        return 'Hello world!';
    }

}

Why am I having this problem? Is it Lightning Locker? I tried disabling it by setting the Aura app container's API version to 38.0, but that didn't seem to make any difference. I'm also not sure disabling Lightning Locker is the best path forward, even if it did solve the problem.

Workarounds, explanations, and suggestions appreciated!

Update 7/2/2020 I tried this again, this time putting the parent component on a Lightning Home Page in my Trailhead org. Either because it's not an Aura app or because something in LWC has changed, I am not getting a "Sorry to interrupt" error when I call the child component's async function a second time. It just fails silently.

0

Can you try following code and see if this works .I avoided arrow function and it solved my issue :

** UPDATE July 2 // async function **

  @api
  async testMe(){
    return 'Hello world!';
  }
| improve this answer | |
  • This would make it a synchronous function. I'm specifically looking for a way to call asynchronous functions on the child component, because I want to await user input within the child component. This makes the pattern for calling the child's functionality simpler. – Matthew Souther Jul 2 at 15:54
  • You can try this code to make the method async without arrow function which is causing the issue : @api async testMe(){ return 'Hello world!'; } – Debadyuti Sil Jul 2 at 19:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.