AUR0108

Error Message

AUR0108: Ast eval error: unknown binary operator: "<operator>"

Where <operator> is the specific operator encountered in the expression.

Description

This error occurs during the evaluation of a binding expression when the parser encounters a binary operator (an operator that works on two operands, like a + b) that it does not recognize or support.

Cause

The most common causes are:

1. Typo in Operator: A standard binary operator was mistyped (e.g., == = instead of ===, & instead of &&).

2. Unsupported Operator: An attempt was made to use a valid JavaScript binary operator that is not supported within Aurelia's binding expression syntax (e.g., bitwise operators like &, |, ^, or operators like the comma operator , used in an unsupported way).

3. Parser Error: A malformed expression might cause the parser to misinterpret parts of the expression as an unknown operator.

Aurelia's binding language supports common JavaScript binary operators, including:

• Arithmetic: +, -, *, /, %

• Logical: &&, ||, ?? (Nullish Coalescing)

• Comparison: ==, !=, ===, !==, <, >, <=, >=

• Assignment-related (in specific contexts like .trigger): =, but generally full assignments are handled differently.

• String concatenation: +

• instanceof, in

Solution

1. Check for Typos: Carefully review the binary operator used in the binding expression and correct any typos.

2. Use Supported Operators: Ensure you are using only binary operators supported by Aurelia's binding syntax.

3. Refactor Logic: If you need the functionality of an unsupported operator (like bitwise operations), perform the calculation in your view model or use a value converter.

4. Verify Expression Syntax: Check the overall structure of the binding expression for any syntax errors that might confuse the parser.

Example

<!-- Incorrect: Typo, extra '=' -->
<div if.bind="status === = 'active'">Active</div>

<!-- Incorrect: Using unsupported bitwise AND operator (&) -->
<p>Flags: ${ userFlags & adminFlag }</p>

<!-- Incorrect: Using comma operator likely in an unsupported way -->
<!-- <p>${ value = 1, value + 1 }</p> -->

<!-- Correct: Using supported operators -->
<div if.bind="status === 'active'">Active</div>
<p if.bind="count > 0 && isValid">Show</p>

<!-- Correct: Perform complex/unsupported operations in VM or converter -->
<p>Flags Check: ${ userFlags | hasFlag:adminFlag }</p>

// View Model Example for unsupported operator
import { customElement } from 'aurelia';

// Example Value Converter for bitwise AND check
export class HasFlagValueConverter {
  toView(value: number, flag: number): boolean {
    return (value & flag) === flag;
  }
}

@customElement({
  // ... dependencies: [HasFlagValueConverter]
})
export class MyComponent {
  status = 'active';
  count = 1;
  isValid = true;
  userFlags = 5; // Example flags (binary 101)
  adminFlag = 4; // Example flag to check (binary 100)
}

Debugging Tips

• Examine the exact operator reported in the error message within your binding expression.

• Compare the operator against the list of supported JavaScript operators commonly allowed in Aurelia bindings.

• Simplify the expression to isolate the problematic part.

• Consider using a value converter or moving the logic to the view model if the operation isn't directly supported in the template syntax.