4

I have an Account List Lightning Web Component (LWC) that is calling a (cachable=true) Controller method on load and when someone in the UI changes a filter string. The always works as long as the result list is not empty. If empty it renders correctly but then shows this obscure message:

[NoErrorObjectAvailable] Script error. a()@https://static.lightning.force.com/cs83/auraFW/javascript/dOMRLHt4yryfVjId3qhSww/aura_prod.js:903:85 {anonymous}()@https://static.lightning.force.com/cs83/auraFW/javascript/dOMRLHt4yryfVjId3qhSww/aura_prod.js:903:278 r.dispatchEvent()@https://static.lightning.force.com/cs83/auraFW/javascript/dOMRLHt4yryfVjId3qhSww/aura_prod.js:12:5396 r.dispatchSelect()@https://innovation-computing-9921-dev-ed.lightning.force.com/components/interop/buttonMenu.js:2:9451 r.handleMenuItemPrivateSelect()@https://innovation-computing-9921-dev-ed.lightning.force.com/components/interop/buttonMenu.js:2:9410

When I remove the (cachable=true) it always works.

Apex

public with sharing class AccountListCtrl {

    @AuraEnabled(cacheable=true)
    public static List<Api.AccountWrapper> getAccounts(String filter) {
        List<Api.AccountWrapper> result = new List<Api.AccountWrapper>();

        try {
            result = ...
        }
        catch(Exception ex) {
            new AuraHandledException()...
        }

        return result;
    }

HTML

<template>
    <lightning-card>
            <lightning-button-menu slot="actions" onselect={changeFilter} icon-name="utility:filter" menu-alignment="right" variant="border-filled">
                <lightning-menu-item value="myAccount" label="My Accounts"></lightning-menu-item>
                <lightning-menu-item value="teamAccounts" label="Team Accounts"></lightning-menu-item>
            </lightning-button-menu>
            ...
    </lightning-card>
</template>

JS

import { LightningElement, track, api } from "lwc";

import getAccounts from "@salesforce/apex/AccountCtrl.getAccounts";

export default class TaskList extends LightningElement {

    @track accounts = [];

    connectedCallback() {
        this.loadAccounts("myAccounts");
    }

    changeFilter(event) {
        this.loadAccounts(event.detail.value);
    }

    loadAccounts(filter) {
        getProcesses({ filter: filter })
            .then((result) => {
                this.accounts = result;
            })
            .catch((error) => {
                ...
            })
            .finally(() => {
                ...
            });
    }
}

Note: When I remove the (cachable=true) it doesn't fail.

  • Have you tried setting a breakpoint in a javascript debugger, such as in Chrome? Usually inspecting the variables there reveals the issue. – Florian Heer Jul 22 at 12:33
  • Sure, but it happend somewhere between the lines. When I take a way the cacchable=true it doesn't fail. – Robert Sösemann Jul 22 at 12:38
  • what is triggering changeFilter? Error is apparently coming from buttonMenu according to your error stack trace. Can you show that code? – salesforce-sas Jul 22 at 13:00
  • 3
    Are you trying to do anything that is invalidating the cache? Something like: salesforce.stackexchange.com/questions/256761/… – Pranay Jaiswal Jul 22 at 13:03
  • 1
    @RobertSösemann I can see, you are not using @wire, that means you are not getting the advantage of cacheable. You are calling everything imperatively, I would use it without cacheable= true. .. That being said, if you wanna do it , it would look a lot like this.processes= [... result]; – Pranay Jaiswal Jul 22 at 14:00

Your Answer

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

Browse other questions tagged or ask your own question.