||= operator is not supported with properties

[ytiq]

Description

JS supports ||= operator and it's pretty useful to add null checks, unfortunately when I try using it I get LWC1001: Unexpected compilation error: /home/sfdc/tools/lwc/2.5.13-236.4/twilioClient.js: Property operator expected value to be one of ["+","-","/","% ","*","**","&","|",">>",">>>","<<","^","==","===","!=","!==","in","instanceof",">","<",">=","<="] but got "||"

Steps to Reproduce

1. Create LWC component
2. Create some property (i.e. testOperator)
3. Try updating it in connectedCallback using ||= like this.testOperator ||= 5

Create component

Works here https://webcomponents.dev/edit/ZpqcMBPmyQJcupbf0qyD/src/child.html?p=stories doesn't work in LWC components for Salesforce

import { LightningElement } from "lwc";

export default class TestOperator extends LightningElement {
  testOperator = 'Please work';

  connectedCallback() {
    this.testOperator ||= 42;
  }
}

Expected Results

No Errors are shown.

Actual Results

Browsers Affected

Version

• LWC: x.x.x

Possible Solution

Additional context/Screenshots This issue is not happening if these are just local variables. For example

import { LightningElement } from "lwc";

export default class TestOperator extends LightningElement {

  connectedCallback() {
    let testOperator;
    testOperator ||= 42;
  }
}

[nolanlawson]

Thanks for reporting. If this works in lwc OSS (off-platform) but doesn't work on the Salesforce platform, then this looks like a duplicate of https://github.com/salesforce/lwc/issues/2204. We are working on adding support for ES2020+.