AUR0111

Error Message

AUR0111: Ast eval error: expected "<name>" to be a function

Where <name> is the name of the property or variable that was expected to be a function.

Description

This error occurs during the evaluation of a binding expression when an attempt is made to call something as a function (e.g., doSomething(), item.process()), but the target of the call is not actually a function type at runtime.

Cause

The primary cause is that the variable or object property being invoked with () does not hold a function. This can happen for several reasons:

1. Incorrect Type: The variable/property holds a value of a different type (e.g., string, number, object, null, undefined) instead of a function.

2. Typo: The name of the function or the property containing the function is misspelled.

3. Scope Issue: The intended function exists but is not accessible from the current binding scope (e.g., it's not a property on the view model or not correctly imported/registered).

4. Conditional Logic: The variable might hold a function under some conditions but not others, and the call is attempted when it's not a function.

5. Lifecycle Issues: An attempt is made to call a method that is only defined or assigned later in the component lifecycle, or after certain asynchronous operations complete.

Solution

1. Verify Type: Ensure that the variable or property being called is indeed a function at the point of invocation. Use console.log or a debugger to inspect its type (typeof variableName === 'function').

2. Check Spelling: Double-check the spelling of the function or property name in the binding expression and the view model definition.

3. Confirm Scope: Verify that the function is defined on the view model or otherwise accessible within the binding's scope.

4. Handle Conditional Cases: If the property might not always be a function, add checks in your template or view model logic before attempting the call (e.g., using if.bind="typeof myVar === 'function'" or conditional logic in the view model).

5. Review Logic/Lifecycle: Ensure the function is defined and assigned before the binding expression tries to call it.

Example

<!-- Assume 'calculateValue' should be a function -->

<!-- Incorrect: 'calulateValue' is misspelled -->
<p>Result: ${ calulateValue() }</p>

<!-- Incorrect: 'user.process' is not a function (maybe it's a property) -->
<button click.trigger="user.process()">Process User</button>

<!-- Correct: Calling a function defined on the view model -->
<p>Result: ${ calculateValue() }</p>

<!-- Correct: Calling a method on an object property -->
<button click.trigger="user.activate()">Activate User</button>

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

interface User {
  name: string;
  activate: () => void; // A function property
  status: string; // A non-function property
}

@customElement({ /* ... */ })
export class MyComponent {
  message = 'Hello';
  user: User = {
    name: 'John Doe',
    activate: () => {
      console.log('User activated');
      this.user.status = 'Active';
    },
    status: 'Inactive'
  };

  // Ensure this is actually a function
  calculateValue = () => {
    return 10 * 5;
  };

  // Example of incorrect setup causing the error:
  // calculateValue = 50; // Assigning a number instead of a function

  // Another example: Trying to call 'status' which is a string
  // <button click.trigger="user.status()">Show Status</button> <-- This would cause AUR0111
}

Debugging Tips

• Use browser developer tools to set breakpoints in the relevant view model code or inspect the scope during rendering.

• Log the typeof the variable/property right before the call is expected to happen.

• Simplify the binding expression to isolate the function call.

• Check the network tab or component lifecycle methods if the function is expected to be loaded or defined asynchronously.