AUR0716

Template compilation error: duplicate definition of the local template named "xxxx" in element "yyyy"

Error message

Template compilation error: duplicate definition of the local template named "{{0}}" in element "{{1}}"

Parameters

1. localElementName: The duplicate name used in the as-custom-element attribute.

2. owningElementName: The name of the custom element whose template contains the duplicate local element definition.

Error explanation

This error occurs during template compilation when two or more local element definitions (<template as-custom-element="...">) within the same parent component's template are given the same name via the as-custom-element attribute. Each local element defined within a parent component must have a unique name.

Common causes

• Copy-pasting a <template as-custom-element="..."> block and forgetting to change the name in the as-custom-element attribute.

• Accidentally using the same name for two different local element concepts within the same parent component.

How to fix

• Review the <template as-custom-element="..."> tags within the parent component's template ({{1}}).

• Ensure that the value provided to each as-custom-element attribute is unique within that template.

• Rename the duplicate local element definitions to have distinct names.

Example of Incorrect Usage:

<!-- my-component.html -->
<template>
  <local-widget></local-widget>
  <local-widget></local-widget> <!-- This will resolve to the first definition -->

  <!-- Error: Duplicate local element name "local-widget" -->
  <template as-custom-element="local-widget">
    <div>Widget Version 1</div>
  </template>
  <template as-custom-element="local-widget">
    <span>Widget Version 2</span>
  </template>
</template>

Example of Correct Usage:

<!-- my-component.html -->
<template>
  <local-widget-a></local-widget-a>
  <local-widget-b></local-widget-b>

  <!-- Correct: Unique names -->
  <template as-custom-element="local-widget-a">
    <div>Widget Version 1</div>
  </template>
  <template as-custom-element="local-widget-b">
    <span>Widget Version 2</span>
  </template>
</template>