AUR0110

Error Message

AUR0110: Ast eval error: left-hand side of tagged template expression is not a function.

Description

This error occurs when evaluating a tagged template literal within a binding expression, but the expression used as the "tag" (the part immediately before the backticks `) does not evaluate to a function.

Cause

Tagged template literals allow you to parse template literals with a function. The syntax is tagFunction`string text ${expression} string text`. This error happens when the value of tagFunction in your binding expression is not actually a function at runtime.

Common causes include:

1. Typo: The name of the tag function is misspelled.

2. Incorrect Scope: The tag function exists but is not accessible from the current binding scope.

3. Incorrect Value: The variable name intended to hold the tag function actually holds a different type of value (e.g., a string, number, object, null, or undefined).

Solution

1. Verify Function Name: Double-check the spelling of the tag function's name in the binding expression.

2. Check Scope: Ensure the tag function is defined and accessible within the scope where the binding expression is evaluated (e.g., it's a property on the view model, an imported function available globally or registered correctly, etc.).

3. Inspect Value: Verify that the variable or property being used as the tag function actually holds a function value at runtime. You might need to debug or log the value just before the evaluation.

Example

<!-- Assume 'myTagProcessor' is intended to be a function -->

<!-- Incorrect: 'myTagProcessor' is misspelled -->
<p>${ myTagProcesor`Hello ${name}` }</p>

<!-- Incorrect: 'myTagProcessor' is undefined or holds a non-function value -->
<p>${ myTagProcessor`Hello ${name}` }</p>

<!-- Correct: Assuming 'myTagProcessor' is a function in the view model's scope -->
<p>${ myTagProcessor`Hello ${name}` }</p>

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

@customElement({ /* ... */ })
export class MyComponent {
  name = 'World';

  // Ensure this is actually a function
  myTagProcessor = (strings: TemplateStringsArray, ...values: unknown[]) => {
    // Example processing logic
    let str = '';
    strings.forEach((string, i) => {
      str += string + (values[i] || '');
    });
    return str.toUpperCase(); // Example: Convert to uppercase
  };

  // Example of an incorrect setup leading to the error
  // myTagProcessor = 'not a function'; // This would cause AUR0110
}

Debugging Tips

• Set a breakpoint in your view model or use logging (console.log) just before the template is rendered to inspect the value of the variable intended to be the tag function.

• Verify that the function is correctly defined and exported/imported if it's not directly on the view model.

• Check the binding context ($scope or this within the relevant part of your code) to ensure the function is accessible.

• Temporarily replace the tagged template literal with a simpler expression or a direct function call to confirm the function itself is working and accessible.