AUR0772

Error Message

AUR0772: Invalid @watch decorator config. Expected an expression or a fn but received null/undefined.

Description

This error occurs when using the @watch decorator, but the required first argument (the expression to watch) is null or undefined. The @watch decorator needs a valid target to observe for changes.

Cause

The primary cause is providing null or undefined as the first argument to the @watch decorator.

import { watch } from '@aurelia/runtime-html';

export class MyViewModel {
  // Incorrect: Passing null as the expression
  @watch(null)
  nullWatchHandler() { /* ... */ }

  // Incorrect: Passing undefined as the expression
  @watch(undefined)
  undefinedWatchHandler() { /* ... */ }

  // Incorrect: Passing a variable that is null/undefined
  @watch(someVariableThatMightBeNull)
  variableWatchHandler() { /* ... */ }
}

Solution

Ensure that the first argument provided to the @watch decorator is always a valid string representing the property path or expression to watch, or a function that selects the value to watch.

1. Provide a Valid Expression: Replace null or undefined with a string expression (e.g., 'myProperty', 'user.address.street') or a function.

2. Check Variables: If using a variable for the expression, ensure it holds a valid string or function before being used in the decorator. Decorator arguments are evaluated at class definition time.

Example

import { watch } from '@aurelia/runtime-html';
import { IContainer, ILogger } from '@aurelia/kernel';

export class MyViewModel {
  firstName: string = 'John';
  lastName: string = 'Doe';
  address: { street: string, city: string } = { street: '123 Main St', city: 'Anytown' };

  constructor(@ILogger private readonly logger: ILogger) {}

  // Correct: Watching a simple property using a string
  @watch('firstName')
  firstNameChanged(newValue: string, oldValue: string) {
    this.logger.info(`First name changed from ${oldValue} to ${newValue}`);
  }

  // Correct: Watching a nested property using a string path
  @watch('address.street')
  streetChanged(newValue: string, oldValue: string) {
    this.logger.info(`Street changed from ${oldValue} to ${newValue}`);
  }

  // Correct: Watching an expression using a function
  @watch((vm: MyViewModel) => vm.firstName + ' ' + vm.lastName)
  fullNameChanged(newValue: string, oldValue: string) {
    this.logger.info(`Full name changed from ${oldValue} to ${newValue}`);
  }

  // Correct: Watching multiple properties via a function returning an array
  @watch((vm: MyViewModel) => [vm.address.street, vm.address.city])
  addressChanged(newValues: [string, string], oldValues: [string, string]) {
    this.logger.info(`Address parts changed from ${oldValues?.join(', ')} to ${newValues.join(', ')}`);
  }

  // Incorrect examples that would cause AUR0772:
  // @watch(null)
  // invalidNullHandler() { /* ... */ }

  // @watch(undefined)
  // invalidUndefinedHandler() { /* ... */ }
}

Debugging Tips

• Verify the arguments passed to the @watch decorator directly in your component's code.

• Ensure any variables used as arguments to @watch are defined and have the correct type (string or function) at the time the class is defined. Remember that decorator code runs early in the class definition process.