AUR0153

Warning Message

AUR0153: Element "<element-name>" has already been registered.

Where <element-name> is the name of the custom element that was attempted to be registered again.

Description

This warning indicates that an attempt was made to register a custom element with a specific name (e.g., my-element), but another custom element with the same name was already registered in the same scope (either globally or within the same component's dependencies). Aurelia requires custom element names to be unique within their registration scope.

Note: This is typically logged as a warning, not a hard error, meaning the application might continue running, but the behavior might be unpredictable as only the first registration for a given name will be effective.

Cause

1. Duplicate Global Registration: Calling Aurelia.register() multiple times with the same custom element class or different classes using the same element name via the @customElement decorator.

2. Duplicate Local Registration: Including the same custom element class multiple times in a component's dependencies array, or including different element classes that resolve to the same element name.

3. Global and Local Conflict: Registering an element globally and then attempting to register another element with the same name locally within a component (or vice-versa). The more specific registration usually takes precedence, but registering duplicates should be avoided.

4. Naming Collision: Accidentally defining two different custom element classes that use the same element name in their @customElement decorator.

Solution

1. Ensure Unique Names: Choose a unique name for each custom element within its intended scope. If defining elements for a library, consider prefixing names (e.g., mylib-button) to avoid collisions.

2. Register Once: Ensure each custom element is registered only once per scope.

   • Review your global registrations in main.ts (or equivalent).

   • Review the dependencies arrays in your component definitions.

3. Consolidate Registrations: If an element is needed in many places, register it globally. If it's specific to one or a few components, register it locally in their dependencies. Avoid mixing global and local registrations for the same name if possible, although Aurelia often handles this based on specificity.

4. Refactor/Rename: If you have two distinct elements that ended up with the same name, rename one of them.

Example

// my-button.ts
import { customElement } from 'aurelia';
@customElement('my-button')
export class MyButton { /* ... */ }

// another-button.ts - Incorrect: Uses the same name
import { customElement } from 'aurelia';
@customElement('my-button') // Causes AUR0153 if both are registered
export class AnotherButton { /* ... */ }

// --- main.ts ---
import { Aurelia } from 'aurelia';
import { MyButton } from './my-button';
import { AnotherButton } from './another-button'; // Importing the conflicting element

// Incorrect: Attempting to register two elements with the same name globally
// Aurelia.register(MyButton, AnotherButton) // This would cause the warning
//   /* ... */ ;

// Correct: Register only one implementation for the name 'my-button'
Aurelia.register(MyButton) // Or AnotherButton, but not both with the same name
  /* ... */ ;

// --- my-component.ts ---
import { customElement } from 'aurelia';
import { MyButton } from './my-button';
// Incorrect: Duplicate local registration
// @customElement({ name: 'my-component', template: '<my-button></my-button>', dependencies: [MyButton, MyButton] })
// export class MyComponent {}

// Correct: Register locally only once (if not registered globally)
// @customElement({ name: 'my-component', template: '<my-button></my-button>', dependencies: [MyButton] })
// export class MyComponent {}

Debugging Tips

• Search your project for the element name mentioned in the warning (<element-name>) to find all classes using that name via @customElement.

• Examine your main.ts (or equivalent) for global registrations using Aurelia.register(...).

• Check the dependencies array in the definitions of your custom elements and components.

• If using conventions, ensure your file/class naming doesn't inadvertently lead to name collisions.