# AUR0506

## Error Message

`AUR0506: Invalid callback for @watch decorator: <callback>`

Where `<callback>` represents the value that was provided as the callback but is not a function.

## Description

This error occurs when using the `@watch` decorator in a view model, but the provided callback (the function that should execute when the watched property changes) is not actually a function type at runtime. The `@watch` decorator requires a valid function to call when changes are detected.

## Cause

1. **Incorrect Callback Type:** The most common cause is providing a value that is not a function as the callback argument to `@watch`. This could be a typo in a function name (string), a property that isn't a function, `null`, `undefined`, etc.
2. **Callback Not Defined:** The function specified as the callback might not be defined on the view model class, or it might be misspelled.
3. **Conditional Assignment:** The property intended to hold the callback function might be conditionally assigned, and `@watch` is evaluated when the property holds a non-function value.

The `@watch` decorator can be used in several ways:

* `@watch(expression)`: Decorating a method directly. The method itself is the callback.
* `@watch(expression, callbackFn)`: Decorating the class. `callbackFn` must be a function.
* `@watch(callbackFn)`: Decorating the class. Watches the class instance, `callbackFn` must be a function.
* `@watch(objectProperty)`: Decorating a callback method. `objectProperty` expression is watched.

This error typically relates to the forms where an explicit callback function is provided or expected.

## Solution

1. **Verify Callback is a Function:** Ensure that the value passed as the callback to `@watch` is indeed a function defined on your view model class or a valid imported function.
2. **Check Spelling:** Double-check the spelling of the callback function name provided to `@watch` or the name of the decorated method.
3. **Ensure Definition:** Confirm that the callback function is correctly defined within the view model class.
4. **Use Correct Decorator Syntax:** Ensure you are using the `@watch` decorator syntax correctly for your intended use case (decorating a method vs. decorating a class).

## Example

```typescript
import { watch, customElement } from 'aurelia';

@customElement({ name: 'watch-example', template: '<input value.bind="firstName"> ${fullName}' })
// Example 1: Watching an expression, calling a class method (must exist)
@watch(c => c.firstName, 'handleNameChange')
// Example 2: Watching the whole view model instance (callback must be a function)
// @watch(viewModelChangedCallback) // Assuming viewModelChangedCallback is defined
export class WatchExample {
  public firstName: string = 'John';
  public lastName: string = 'Doe';
  public fullName: string = 'John Doe';

  // Correct callback method for Example 1
  handleNameChange(newValue: string, oldValue: string) {
    console.log(`First name changed from ${oldValue} to ${newValue}`);
    this.updateFullName();
  }

  // Example 3: Decorating a method directly (method is the callback)
  @watch(c => c.lastName)
  lastNameChanged(newValue: string, oldValue: string) {
    console.log(`Last name changed from ${oldValue} to ${newValue}`);
    this.updateFullName();
  }

  updateFullName() {
    this.fullName = `${this.firstName} ${this.lastName}`;
  }

  // --- Incorrect Usage Leading to AUR0506 ---

  // Incorrect: Providing a string that isn't a valid method name
  // @watch(c => c.firstName, 'handleNameChangeTypo')

  // Incorrect: Providing a property that isn't a function
  // notAFunction = 'hello';
  // @watch(c => c.firstName, 'notAFunction')

  // Incorrect: Providing undefined/null callback (if syntax allowed it)
  // @watch(c => c.firstName, undefined)

}

// Correct callback function for Example 2 (if used)
function viewModelChangedCallback(viewModel: WatchExample, changes: unknown) {
  console.log('ViewModel instance changed:', viewModel, changes);
}
```

## Debugging Tips

* Identify the component (`<ControllerName>`) and the specific `@watch` decorator causing the issue.
* Examine the arguments passed to the `@watch` decorator.
* If a callback name (string) is provided, verify that a method with that exact name exists on the class.
* If a function reference is provided directly, ensure it's correctly defined and imported if necessary.
* Use `console.log(typeof this.callbackMethodName)` in the constructor or `binding` lifecycle hook to check the type of the intended callback just before `@watch` is likely processed.
* Temporarily remove the problematic `@watch` decorator to confirm it's the source of the error.


---

# 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/runtime-html/aur0506.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.