AUR0714

Error Message

AUR0714: Template compilation error: primary already exists on element/attribute "<name>"

Where <name> is the name of the element or attribute definition involved in the conflict.

Description

This error occurs during the template compilation phase when an HTML element is found to have conflicting "primary" property bindings. A primary property allows for a shorthand binding syntax (e.g., <my-element.bind="value"> instead of <my-element main-property.bind="value">). This error indicates that the compiler detected more than one attempt to use a primary property binding on the same element, either through multiple shorthand syntaxes or a mix of shorthand and explicit bindings to primary properties.

Cause

1. Multiple Shorthand Bindings: Applying the shorthand syntax (e.g., .bind, .two-way) multiple times on the same custom element or to multiple custom attributes on the same element, where each attribute has a primary property.

2. Shorthand and Explicit Primary Binding: Using the shorthand syntax for the element's primary property while also explicitly binding another primary property from a custom attribute applied to that element.

3. Multiple Custom Attributes with Primary Properties: Applying multiple custom attributes to the same HTML element, where each attribute defines a primary property, and attempting to bind values to them in a way that conflicts (e.g., using shorthand for one and explicit binding for another, or multiple explicit bindings if the compiler interprets them as conflicting primaries).

Solution

1. Use Explicit Syntax: Avoid using the shorthand syntax multiple times on the same element. Instead, use the full, explicit syntax for all but one primary property binding. Specify the property name explicitly (e.g., property-name.bind="value").

2. Review Attributes: Check all custom attributes applied to the element. If multiple attributes define primary properties, ensure you are using explicit binding syntax for all of them or refactor the attributes so only one primary property is involved per element.

3. Refactor Element/Attributes: If possible, reconsider the design of the custom element or attributes to avoid having multiple conflicting primary properties applicable to the same host element.

Example

// my-element.ts (Custom Element)
import { bindable, customElement } from 'aurelia';
@customElement('my-element')
export class MyElement {
  @bindable({ primary: true }) value: string;
  @bindable otherProp: number;
}

// my-attribute.ts (Custom Attribute)
import { bindable, customAttribute } from 'aurelia';
@customAttribute('my-attribute')
export class MyAttribute {
  @bindable({ primary: true }) config: object;
  @bindable anotherSetting: boolean;
}

<!-- Assume my-element and my-attribute are registered -->

<!-- Incorrect: Multiple shorthand bindings (implicit primary) -->
<!-- This syntax might be ambiguous or directly conflict -->
<my-element.bind="dataValue" my-attribute.bind="configObject"></my-element>

<!-- Incorrect: Shorthand for element and explicit primary for attribute (depending on exact interpretation) -->
<my-element.bind="dataValue" my-attribute="config.bind: configObject"></my-element>

<!-- Correct: Use explicit syntax for at least one -->
<my-element value.bind="dataValue" my-attribute="config.bind: configObject"></my-element>

<!-- Correct: Use explicit syntax for both -->
<my-element value.bind="dataValue" other-prop.bind="numValue" my-attribute="config.bind: configObject; another-setting.bind: boolValue"></my-element>

Debugging Tips

• Inspect the element mentioned in the error message in your HTML template.

• Identify all custom attributes applied to that element.

• Check the definitions of the custom element and its attributes to see which ones define a primary bindable property.

• Rewrite the bindings on the problematic element using explicit property names (property.bind="value") instead of the shorthand (.bind="value") to resolve the ambiguity.