AUR9991

Error Message

AUR9991: Invalid @children usage. @children decorator can only be used on a field

Description

This error occurs when the @children decorator, used for querying child elements within a component's view, is applied incorrectly. The decorator is designed only to be used on class properties (fields).

Cause

The direct cause is applying the @children decorator to something that is not a class property. Examples include:

1. Decorating a Method: Applying @children to a method definition.

2. Decorating a Class: Applying @children directly to the class declaration.

3. Decorating a Getter/Setter: Applying @children to an accessor property.

Solution

Ensure that the @children decorator is only applied directly to a class property declaration.

Example

import { customElement, children } from 'aurelia';

@customElement({
  name: 'my-component',
  template: `<slot></slot>`
})
export class MyComponent {

  // Correct: @children applied to a class property
  @children('div.item')
  items: HTMLDivElement[];

  // Incorrect: @children applied to a method
  // @children('div.item')
  // getItems() { /* ... */ }

  // Incorrect: @children applied to a getter
  // @children('div.item')
  // get itemElements() { /* ... */ }
}

// Incorrect: Applying @children to the class itself
// @children('div.item')
// @customElement({ /* ... */ })
// export class InvalidComponent { /* ... */ }

Debugging Tips

• Review the code where the @children decorator is used.

• Verify that the decorator is placed directly above a property declaration (e.g., items: HTMLElement[];).

• Ensure the decorator is not applied to methods, getters, setters, or the class itself.