AUR0229

Error Message

AUR0229: @bindable cannot be used as a class decorator when no property name is supplied in the configuration object.

Description

This error occurs when the @bindable decorator is used as a class decorator with a configuration object, but at least one of the entries within that configuration object is missing its property name (the key).

Cause

When using @bindable as a class decorator, you provide a configuration object where each key represents the name of a property on the class that you want to make bindable. The value associated with each key is an optional configuration object for that specific bindable property (or an empty object {} for default settings).

This error arises if the configuration object itself is malformed, specifically lacking the property name string as the key for one or more of its entries. This is less common with direct object literal syntax but could potentially happen if the configuration object is generated dynamically or if there's a structural mistake.

Solution

Ensure that every entry in the configuration object provided to the @bindable class decorator has a valid string key that corresponds to a property name defined within the class.

Example

import { bindable, customElement } from 'aurelia';

// Assume we are trying to configure 'prop1' and 'prop2'

// Incorrect: The configuration object has a definition ({ primary: true })
// but lacks the property name key (e.g., 'prop1') it applies to.
// This specific syntax might be hard to achieve directly but illustrates the concept.
// A more likely scenario is dynamic generation producing an invalid structure.
/*
@bindable({
  prop1: {}, // Correct entry
  {}: { primary: true } // Incorrect entry - missing property name key
})
*/
@customElement({ name: 'my-component-incorrect', template: `...` })
export class MyComponentIncorrect {
  prop1: string = 'value1';
  prop2: number = 123;
}

// Correct: Each entry in the configuration object has a string key ('prop1', 'prop2')
// corresponding to a property name in the class.
@bindable({
  prop1: {},
  prop2: { primary: true }
})
@customElement({ name: 'my-component-correct', template: `...` })
export class MyComponentCorrect {
  prop1: string = 'value1';
  prop2: number = 123;
}

Debugging Tips

• Examine the configuration object passed to the @bindable class decorator where the error occurs.

• Verify that every top-level key within this object is a string representing a valid property name that exists on the class.

• If the configuration object is generated dynamically, inspect the generation logic to ensure it correctly produces key-value pairs where the key is the property name string.

• Ensure there are no typos or structural errors in the configuration object literal.

</rewritten_file>