LWC1058: Invalid HTML syntax: unexpected-equals-sign-before-attribute-name

Question

I'm not a developer and I'm trying to get chatGPT to write me a Lightning Web Component (LWC) on Salesforce. I've managed to get a few things done, but I'm stuck on a problem that I can't seem to understand.

My issue seems to be that all the IF statements in which I have one or several equal signs are blocking my deployment (lines 4, 20 & 24).

Here's the error message I get when I try deploying : LWC1058: Invalid HTML syntax: unexpected-equals-sign-before-attribute-name. For more information, please visit https://html.spec.whatwg.org/multipage/parsing.html#parse-error-unexpected-equals-sign-before-attribute-name (4:58)

<template>
    <lightning-card title="Mass Create Opportunity Sample" icon-name="standard:opportunity">
        <div class="slds-m-around_medium">
            <template if:true={opportunityOptions.length === 0}>
                <p>No recent opportunities found.</p>
            </template>
            <template if:true={opportunityOptions.length > 0}>
                <template if:true={numRecords}>
                    <lightning-input
                        type="number"
                        label="Number of Records"
                        value={numRecords}
                        onchange={handleChange}
                    ></lightning-input>
                    <div class="slds-m-top_medium">
                        <lightning-button
                            label="Next"
                            variant="brand"
                            onclick={handleNext}
                            disabled={numRecords <= 0}
                        ></lightning-button>
                    </div>
                </template>
                <template if:true={opportunityIds.length === numRecords}>
                    <template for:each={opportunityIds} for:item="opportunityId" for:index="index">
                        <div key={index} class="slds-m-bottom_medium">
                            <lightning-combobox
                                label={`Opportunity ${index + 1}`}
                                value={opportunityId}
                                options={opportunityOptions}
                                onchange={handleOpportunityChange}
                                data-key={index}
                                placeholder="-- Select Opportunity --"
                            ></lightning-combobox>
                        </div>
                    </template>
                    <div class="slds-m-top_medium">
                        <lightning-button
                            label="Create Records"
                            variant="brand"
                            onclick={handleCreateRecords}
                            disabled={hasEmptyOpportunity()}
                        ></lightning-button>
                    </div>
                </template>
            </template>
        </div>
    </lightning-card>
</template>

I couldn't find any resources that address this issue in a way that I could understand, so here I am creating my own question.

Any help would be greatly appreciated. Don't hesitate to explain things as if I were a 7 years old :) Thanks !

Answer 1

LWC doesn't allow expressions such as disabled={numRecords <= 0} in the html. And certainly not {hasEmptyOpportunity()}. The AI engine is lying to you, probably because the Aura language allowed expressions. They weren't exactly 1-to-1 anyway because in Aura there were "quote" marks and exclamation marks in the mix: "{!expression}, "{!v.someVariable.length > 0}".

{expressions} in LWC html file have to be "simple". Either a real variable defined in your template

export default class MyClass{
   numRecords;
   isDisabled;

   someFunction(){
      // however you got your "numRecords", at some point after that
      this.isDisabled = this.numRecords <= 0;
   }
}

and then in LWC ...disabled={isDisabled}.

OR as a "getter" - a special javascript function

export default class MyClass{
   numRecords;

   get isDisabled(){
      return this.numRecords <= 0;
   }
}

(but not both, don't make a variable and function with same name, that's "fun" to debug)

It's written up in migration guide from aura to lwc: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.migrate_expressions

and https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.js_props_getter

but I guess it's the case of "easy if you know what keywords to Google for"...

Try to follow some self-paced LWC courses on https://trailhead.salesforce.com/ to understand better what the machine spews out.

Or if time is of the essence - give the task to a developer. You don't need a ful blown consulting company, there are freelancers for example at https://appexchange.salesforce.com/developers, maybe you could post at https://appexchange.salesforce.com/jobs for example.