LWC - Exception when calling child function more than once

Question

I'm having an issue while developing an LWC and was hoping someone could help as the error isn't super clear to me.

I have LWC A which contains LWC B (check example code below):

            <div class="slds-col">
          <c-lwc-b value={value}>
          </c-lwc-b>
        </div>

and I am trying to call a method on LWC B from LWC A with the following logic:

this.template.querySelector('c-lwc-b').doThings();

The issue is the following: at the first time the line above is invoked it works as expected, running the child component methods. However, if I try to repeat the whole process I get a [NoErrorObjectAvailable] Script error., which after embedded on a try-catch block returns a Access denied: {"from":{"namespace":"c"},"to":{"namespace":"default"}} exception.

Thank you in advance for your help!

Answer 1

For whoever is interested: The functions which were being invoked on the child component were defined as arrow functions. After replacing them for traditional functions it works as expected.

It would be interesting to know WHY arrow functions impact the namespace (apparently) though, so if anyone knows why this is happening please feel free to add your thoughts!