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 !

I refer you to the policy regarding ChatGPT content described on this page — Tangentially Perpendicular
– Tangentially Perpendicular, Commented Jun 13, 2023 at 8:43
@TangentiallyPerpendicular thanks for pointing this out. I wasn't aware of that. Any idea, then how I could get help to solve my problem ? — Malo Lesegretain
– Malo Lesegretain, Commented Jun 13, 2023 at 9:03
@TangentiallyPerpendicular I was under impression the policy is about chat GPT-generated answers? To block "karma farming"? Asking a question to generated code... well, yes, not great but how else can somebody learn, not too different from "I found this snippet online, doesn't work, help"? — eyescream
– eyescream, Commented Jun 13, 2023 at 21:09
@eyescream First line of the linked page, in big letters: Use of ChatGPT1 generated text for content on Stack Overflow is temporarily banned. That's content, not just answers. In any case, I'm not trying to enforce the policy, just highlighting it. If you have a problem with it, raise it on Meta Stack Overflow — Tangentially Perpendicular
– Tangentially Perpendicular, Commented Jun 13, 2023 at 22:10

eyescream · Accepted Answer · 2023-06-13 21:22:05Z

0

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.

edited Jun 13, 2023 at 21:22

answered Jun 13, 2023 at 21:06

eyescream

19.8k3 gold badges39 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Malo Lesegretain Over a year ago

Thanks @eyescream, that does help. Actually, I'm sort of training on my own to see where chatGPT can take me... I managed to rewrite my code in order to move forward. I still have a few things to fix but I'm going in the right direction thanks to you ! Also, I think you're right when you pointed out that there's little difference between chatGPT-generated code and a snippet found online.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related