AUR0712

Template compilation error: Bindable property and attribute needs to be unique; found property: xxxx, attribute: yyyy

Error message

Template compilation error: Bindable property and attribute needs to be unique; found property: {{0}}, attribute: {{1}}

Parameters

1. propertyName: The name specified in the property attribute of the <bindable> tag.

2. attributeName: The name specified in the attribute attribute of the <bindable> tag (or undefined if not specified).

Error explanation

This error occurs during template compilation when defining bindable properties for a local element using the <bindable> tag. It indicates that either the specified property name or the specified attribute name (if provided) has already been used by another <bindable> tag within the same local element definition (<template as-custom-element="...">). Both property names and attribute names must be unique for a single local element.

Common causes

• Defining two <bindable> tags with the same property attribute value within the same <template as-custom-element="...">.

• Defining two <bindable> tags with the same attribute attribute value within the same <template as-custom-element="...">.

How to fix

• Review the <bindable> tags within the specified local element definition.

• Ensure that each property attribute value is unique across all <bindable> tags for that local element.

• Ensure that each attribute attribute value (if specified) is unique across all <bindable> tags for that local element.

• Rename or remove the duplicate property or attribute definition.

Example of Incorrect Usage:

<!-- my-component.html -->
<template>
  <local-element message="Hi" data="Test"></local-element>

  <template as-custom-element="local-element">
    <!-- Error: Duplicate property name "message" -->
    <bindable property="message"></bindable>
    <bindable property="message"></bindable>

    <!-- Error: Duplicate attribute name "data-attr" -->
    <bindable property="data1" attribute="data-attr"></bindable>
    <bindable property="data2" attribute="data-attr"></bindable>

    <span>${message} ${data1} ${data2}</span>
  </template>
</template>

Example of Correct Usage:

<!-- my-component.html -->
<template>
  <local-element message="Hi" data-value="Test"></local-element>

  <template as-custom-element="local-element">
    <!-- Correct: Unique property and attribute names -->
    <bindable property="message"></bindable>
    <bindable property="dataValue" attribute="data-value"></bindable>

    <span>${message} ${dataValue}</span>
  </template>
</template>