14

I have a LWC that is used in different orgs. In one of them, when I dispatch an event like:

this.dispatchEvent( new CustomEvent( 'press' ));

I am getting the [NoErrorObjectAvailable] Script error in that line (as per the Stack trace).

If I comment that line, then the error disappears.

This is the most similar question I have found but I am making no use of event.target so unfortunately it does not help.

What can I be doing wrong?

2
  • 1
    Can you add the stack trace and code that handling the event? May 19, 2021 at 7:57
  • Do you think it is due to the new Summer '21 release? Are you getting this error only on a sandbox where Summer '21 has been deployed?
    – S..
    May 19, 2021 at 8:08

3 Answers 3

26

TL;DR;

As of my experience, the most common reason why [NoErrorObjectAvailable] Script error appears is when because a custom event is handled by a ghost method, meaning a method that does not exist on the JS controller.

For example, oncustomevent={ghostMethod}, where ghostMethod does not exist in the JS controller.


Long version

Let's say we have a child component like the following:

childComp.html

<template>
    <lightning-button label="Notify Parent Comp" onclick={notifyParent}></lightning-button>
</template>

childComp.js

import { LightningElement } from 'lwc';

export default class ChildComp extends LightningElement {
    notifyParent() {
        const event = new CustomEvent('childnotification', { bubbles: true });
        this.dispatchEvent(event);
    }
}

which sends a childnotification event to parentComp

parentComp.html

<template>
    <div onchildnotification={ghostMethod}>
        <div onchildnotification={handleChildNotification}>
            <lightning-textarea value="Parent Component"></lightning-textarea>
            <c-child-comp></c-child-comp>
        </div>
    </div>
</template>

parentComp.js

import { LightningElement } from 'lwc';

export default class ParentComp extends LightningElement {
    handleChildNotification() {
        console.log('Child Event arrived');
    }
}

As you can see, when the parent component receives childnotification event, apart from invoking handleChildNotification (which exists on parentComp.js ) it's invoking ghostMethod, which does not exist on parentComp.js.

  • Because of this reason, you will get this annoying [NoErrorObjectAvailable] Script error failure.

Points to take into account and why I consider this a Salesforce LWC Bug

  • parentComp.html can be successfully deployed even if ghostMethod does not exist on parentComp.js
  • As of my experience, you only get this error if ghostMethod has never existed in the LWC. If it has existed in a previous LWC version it will not fail (even if the code is not there anymore)

Update

Another common reason why this error appears, is because an exception occurs on the handler method (in our case, handleChildNotification). This is easier to identify and troubleshoot with the pause on exceptions button of the browser development tools.

3
  • 2
    Thanks you!! very detailed answer. That was exactly what was happening May 19, 2021 at 8:23
  • 2
    Today I have faced it again, and the problem was not a ghost method, but and exception happening on the handleEvent method. In this case it was easier to identify with the "pause on exceptions" button May 22, 2021 at 8:55
  • Hey @GabrielSerranoSalas please feel free to edit my answer and add that info :) May 23, 2021 at 9:46
0

In our case, this error occurred when we were using "cmp or any different value" than what is being passed in the parameter which is "component".

In the second line of code, when we changed "cmp" to "component" - the error got resolved. handleSave : function(component, event, helper) {

    var action = cmp.get("c.shareActionPlanTemplates");
 
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
         //   alert("From server: " + response.getReturnValue());
            console.log(response.getReturnValue());
        }
        else if (state === "INCOMPLETE") {
            // do something
        }
        else if (state === "ERROR") {
            var errors = response.getError();
            if (errors) {
                if (errors[0] && errors[0].message) {
                    console.log("Error message: " + 
                             errors[0].message);
                }
            } else {
                console.log("Unknown error");
            }
        }
    });
    $A.enqueueAction(action);  
     
 },
3
  • fyi, this question was concerning lightning web components - not aura components. Dec 13, 2021 at 17:43
  • this is absolute weird, why do we need to call the arguments in such a specific way. it definetely helped in my case as well... so weird. Upvoting Feb 27 at 13:04
  • I also had to fix the way I'm sending the data (it had to be in a 'detail' property) Feb 27 at 13:21
0

in my case, i forgot to add 'event' in the js method

example: 
handleChange(){
   // will throw [NoErrorObjectAvailable] Script error   
}

handleChange(event){
   
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .