AUR0714

Template compilation error: primary already exists on element/attribute "yyyy"

Error message

Template compilation error: primary already exists on element/attribute "{{0}}"

Parameters

1. 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: true on more than one bindable property in the component's definition.

• Having a bindable property named value (which is the default primary) and also setting primary: true on another bindable property.

How to fix

• Review the bindables definition 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 remove primary: true from other bindables or rename the value bindable 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
}