AUR0227

Error Message

AUR0227: @bindable is not supported for properties that uses a symbol for name. Use a string for the property name instead.

Description

This error occurs when the @bindable decorator is applied to a class property (field or getter/setter pair) whose name is defined using a JavaScript Symbol.

Cause

Aurelia's @bindable decorator and its underlying binding system fundamentally rely on string-based property names to establish connections between HTML template bindings and component view model properties. Using a Symbol as a property name prevents Aurelia from being able to discover and bind to that property from the template in the standard way.

While Symbols are valid property keys in JavaScript/TypeScript, they are not suitable for properties intended to be exposed for binding via the @bindable decorator.

Solution

Refactor your code to use a regular string literal for the name of any property that needs to be decorated with @bindable.

Example

import { bindable, customElement } from 'aurelia';

const mySymbol = Symbol('myPrivateData');

@customElement({ name: 'my-component', template: `<input value.bind="symbolProp">` })
export class MyComponent {

  // Incorrect: Using @bindable on a property named with a Symbol
  @bindable
  [mySymbol]: string = 'initial value';

  // Correct: Use a string name for bindable properties
  @bindable
  public stringProp: string = 'initial value';
}

// Accessing the component
// <my-component string-prop.bind="someValue"></my-component>
// Attempting to bind to [mySymbol] (symbolProp in the example) would fail.

Debugging Tips

  • Identify the property in your component decorated with @bindable that uses a Symbol for its name.

  • Rename the property to use a standard string name.

  • Update any internal references within the component's class to use the new string-based name.

  • Ensure any bindings in associated templates are updated to use the new, string-based property name (converted to kebab-case for HTML attributes, e.g., stringProp becomes string-prop).

Last updated

Was this helpful?