# AUR0156

## Error Message

`AUR0156: Expression error: unconsumed token: "{{token}}" at position {{position}} of "{{expression}}"`

Where:

* `{{token}}` is the leftover token that couldn't be parsed
* `{{position}}` is the character position in the expression
* `{{expression}}` is the full binding expression

## Description

This error occurs when the expression parser successfully parses part of an expression but encounters additional tokens that don't form a valid continuation of the expression. Essentially, there are "leftover" tokens that the parser doesn't know how to handle.

## Common Scenarios

### Multiple Statements

```html
<!-- ❌ Wrong: Multiple statements not allowed -->
<div textcontent.bind="value = 5; result = 10"></div>
<div click.trigger="doSomething(); doOther()"></div>
```

### Invalid Syntax Combinations

```html
<!-- ❌ Wrong: Invalid token combinations -->
<div textcontent.bind="user name"></div> <!-- Missing operator -->
<div textcontent.bind="value 5"></div> <!-- Missing operator -->
<div textcontent.bind="item.prop extra"></div> <!-- Unexpected token -->
```

### Misplaced Operators

```html
<!-- ❌ Wrong: Operators in wrong positions -->
<div textcontent.bind="value + + 5"></div>
<div textcontent.bind="user. .name"></div>
<div textcontent.bind="result &&"></div>
```

### Incomplete Expressions

```html
<!-- ❌ Wrong: Incomplete expressions with trailing tokens -->
<div textcontent.bind="getValue() extra"></div>
<div textcontent.bind="condition ? result"></div> <!-- Missing : else part -->
```

## Solutions

### 1. **Fix Multiple Statements**

```html
<!-- ✅ Correct: Single expressions only -->
<div textcontent.bind="getValue()"></div>
<div click.trigger="doSomething()"></div>

<!-- ✅ Correct: Use methods for complex logic -->
<div click.trigger="handleMultipleActions()"></div>
```

```typescript
export class MyComponent {
  handleMultipleActions() {
    this.doSomething();
    this.doOther();
  }
}
```

### 2. **Add Missing Operators**

```html
<!-- ✅ Correct: Proper operators -->
<div textcontent.bind="user + ' ' + name"></div>
<div textcontent.bind="value * 5"></div>
<div textcontent.bind="item.prop.extraProp"></div>
```

### 3. **Fix Operator Placement**

```html
<!-- ✅ Correct: Proper operator usage -->
<div textcontent.bind="value + 5"></div>
<div textcontent.bind="user.name"></div>
<div textcontent.bind="result && condition"></div>
```

### 4. **Complete Expressions**

```html
<!-- ✅ Correct: Complete ternary expressions -->
<div textcontent.bind="condition ? result : alternative"></div>
<div textcontent.bind="getValue()"></div>
<div class.bind="isActive ? 'active' : 'inactive'"></div>
```

## Example: Common Fixes

```html
<!-- Template with unconsumed token errors -->
<template>
  <!-- ❌ Problems -->
  <div textcontent.bind="first second"></div>
  <div textcontent.bind="value +"></div>
  <div textcontent.bind="user name age"></div>
  <div click.trigger="save(); close()"></div>
  
  <!-- ✅ Fixed -->
  <div textcontent.bind="first + ' ' + second"></div>
  <div textcontent.bind="value + defaultValue"></div>
  <div textcontent.bind="user.name + ' (' + user.age + ')'"></div>
  <div click.trigger="saveAndClose()"></div>
</template>
```

```typescript
export class MyComponent {
  first = 'John';
  second = 'Doe';
  value = 10;
  defaultValue = 0;
  user = { name: 'Jane', age: 30 };
  
  saveAndClose() {
    this.save();
    this.close();
  }
  
  save() {
    // Save logic
  }
  
  close() {
    // Close logic
  }
}
```

## Debugging Tips

1. **Check Expression Syntax**: Look for missing operators between values
2. **Verify Completeness**: Ensure expressions are complete (e.g., ternary operators have both branches)
3. **Split Complex Logic**: Move complex multi-step logic to component methods
4. **Use Console**: Test expression parts in browser console to identify issues
5. **Check Position**: The error shows exactly where the unconsumed token starts

## Related Errors

* [AUR0155](/developer-guides/error-messages/0151-to-0179/aur0155.md) - Unexpected end of expression
* [AUR0167](/developer-guides/error-messages/0151-to-0179/aur0167.md) - Missing expected token
* [AUR0168](/developer-guides/error-messages/0151-to-0179/aur0168.md) - Unexpected character


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aurelia.io/developer-guides/error-messages/0151-to-0179/aur0156.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
