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 aSymbol
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
becomesstring-prop
).
Last updated
Was this helpful?