getting error to fetch the data in getter method

Question

error is coming:

LWC1535: Unexpected plugin compilation error: Plugin - lwc, Hook - transform, Cause - Invalid expression {isInvoiceExpanded(invoice.key)}

JS Code

import { LightningElement, wire } from 'lwc';
import getInvoiceTreeMap from '@salesforce/apex/InvoiceTreeController.getInvoiceTreeMap';

const CHUNK_SIZE = 10;

export default class InvoiceTreeComponent extends LightningElement {
    invoiceTree;
    expandedInvoiceKey;
    error;
    loadedItemsCount = [];
    

    @wire(getInvoiceTreeMap)
    wiredInvoiceTree({ error, data }) {
        if (data) {
            this.invoiceTree = Object.keys(data).map(key => ({ key: key, lineItems: data[key] }));
            console.log('data for invoice---->',data);
            console.log('this.invoiceTree---->', this.invoiceTree);
            // this.invoiceTree = this.invoiceTree.map(item => ({ key: item.key, lineItems: data[item.key] }));
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.invoiceTree = undefined;
        }
    }

    handleInvoiceClick(event) {
        const clickedInvoiceKey = event.currentTarget.dataset.invoiceKey;
        console.log('clickedInvoiceKey-->',clickedInvoiceKey);
        this.loadedItemsCount[clickedInvoiceKey] = CHUNK_SIZE; // Load the first chunk of Invoice Line Items
            console.log('loadedItemsCount-->',this.loadedItemsCount);
            console.log('novie',this.isInvoiceExpanded(invoiceKey));


         if (this.expandedInvoiceKey === clickedInvoiceKey) {
            this.expandedInvoiceKey = null; // Collapse the clicked invoice if already expanded
        } else {
            this.expandedInvoiceKey = clickedInvoiceKey; // Expand the clicked invoice
            this.loadedItemsCount[clickedInvoiceKey] = CHUNK_SIZE; // Load the first chunk of Invoice Line Items
            console.log('loadedItemsCount-->',this.loadedItemsCount);
        }
    }

    handleViewMore(event) {
        const invoiceKey = event.currentTarget.dataset.invoiceKey;
        console.log('invoiceKey',invoiceKey);
        this.loadedItemsCount[invoiceKey] += CHUNK_SIZE; // Load the next chunk of Invoice Line Items
        console.log('More click',this.loadedItemsCount);
    }

    get isInvoiceExpanded() {
        return (invoiceKey) => this.expandedInvoiceKey === invoiceKey;
    }

    get visibleInvoiceLineItems() {
        return (invoiceKey) => this.invoiceTree.find(item => item.key === invoiceKey).lineItems.slice(0, this.loadedItemsCount[invoiceKey]);
    }

    get remainingInvoiceLineItemsCount() {
        return (invoiceKey) => Math.max(this.invoiceTree.find(item => item.key === invoiceKey).lineItems.length - this.loadedItemsCount[invoiceKey], 0);
    }
}

<template>
    <lightning-card title="Invoice Tree Structure">
        <template if:true={invoiceTree}>
            <ol>
                <template for:each={invoiceTree} for:item="invoice">
                    <li key={invoice.key}>
                        <div class="invoice-header" onclick={handleInvoiceClick} data-invoice-key={invoice.key}>
                            {invoice.key}
                        </div>
                        **<template if:true={isInvoiceExpanded(invoice.key)}>
                            <ol>
                                <template for:each={visibleInvoiceLineItems(invoice.key)} for:item="lineItem">
                                    <li key={lineItem.Id}>{lineItem.Name}</li>
                                </template>
                            </ol>
                            <template if:true={remainingInvoiceLineItemsCount(invoice.key)}>
                                <div class="view-more" onclick={handleViewMore} data-invoice-key={invoice.key}>View More ({remainingInvoiceLineItemsCount(invoice.key)})</div>
                            </template>
                        </template>
                    </li>
                </template>
            </ol>
        </template>
        <template if:true={error}>
            <p>{error}</p>
        </template>
    </lightning-card>
</template>

Answer 1

<template if:true={isInvoiceExpanded(invoice.key)}>

Is not allowed in LWC. You must have an already-computed property.

<template lwc:if={invoice.isExpanded)}>

You'll need to find the appropriate element in memory to set the property on.

Note that if:true is deprecated. Use lwc:if instead.

Answer 2

There is no code with your error message. I assume the error is on the line. console.log('novie',this.isInvoiceExpanded(invoiceKey));

invoiceKey is not defined anywhere and it's causing the error.