AUR0714
Template compilation error: primary already exists on element/attribute "yyyy"
Error message
Template compilation error: primary already exists on element/attribute "{{0}}"
Parameters
elementOrAttributeName: The name of the custom element or custom attribute with multiple primary bindables.
Error explanation
This error occurs during template compilation when a custom element or custom attribute definition has more than one bindable property marked as the primary property. A component (element or attribute) can only have one primary bindable.
The primary bindable property is the one that receives the value when the attribute is used without explicitly specifying a property name.
For custom elements:
<my-element="valueToPrimaryBindable">For custom attributes:
<div my-attribute="valueToPrimaryBindable">
You define a primary bindable by setting primary: true in the bindable definition object or, often by convention, the bindable named value is the default primary if no other is specified.
Common causes
Explicitly setting
primary: trueon more than one bindable property in the component's definition.Having a bindable property named
value(which is the default primary) and also settingprimary: trueon another bindable property.
How to fix
Review the
bindablesdefinition for the custom element or custom attribute mentioned in the error message.Ensure that at most one bindable property has
primary: true.If you have a bindable named
value, either removeprimary: truefrom other bindables or rename thevaluebindable if it's not intended to be the primary one.
Example of Incorrect Usage:
// my-attribute.ts
import { bindable } from 'aurelia';
export class MyAttributeCustomAttribute {
// Error: Both 'value' (default primary) and 'message' are primary
@bindable value: string;
@bindable({ primary: true }) message: string;
}// my-element.ts
import { bindable, customElement } from 'aurelia';
@customElement({ name: 'my-element', template: `...` })
export class MyElement {
// Error: Two bindables explicitly marked as primary
@bindable({ primary: true }) data: unknown;
@bindable({ primary: true }) config: unknown;
}Example of Correct Usage:
// my-attribute.ts
import { bindable } from 'aurelia';
export class MyAttributeCustomAttribute {
// 'value' is the primary by default convention
@bindable value: string;
@bindable message: string; // Not primary
}// my-element.ts
import { bindable, customElement } from 'aurelia';
@customElement({ name: 'my-element', template: `...` })
export class MyElement {
// Only 'data' is primary
@bindable({ primary: true }) data: unknown;
@bindable config: unknown; // Not primary
}Last updated
Was this helpful?