AUR0154

Warning Message

AUR0154: Attribute "<attribute-name>" has already been registered.

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

Description

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

Note: This is typically logged as a warning, not a hard error. The application might continue, but only the first registration for the given name will be effective, potentially leading to unexpected behavior.

Cause

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

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

3. Global and Local Conflict: Registering an attribute globally and then attempting to register another attribute with the same name locally within a component (or vice-versa).

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

Solution

1. Ensure Unique Names: Choose a unique name for each custom attribute within its intended scope. Consider prefixing names for libraries (e.g., mylib-tooltip).

2. Register Once: Ensure each custom attribute is registered only once per scope. Check global registrations (main.ts) and local dependencies arrays.

3. Consolidate Registrations: Register globally if widely used, or locally if specific to few components. Avoid mixing registration types for the same name.

4. Refactor/Rename: If two distinct attributes share a name, rename one.

Example

// highlight.ts
import { customAttribute } from 'aurelia';
@customAttribute('highlight')
export class HighlightAttribute { /* ... */ }

// blue-highlight.ts - Incorrect: Uses the same name
import { customAttribute } from 'aurelia';
@customAttribute('highlight') // Causes AUR0154 if both are registered
export class BlueHighlightAttribute { /* ... */ }

// --- main.ts ---
import { Aurelia } from 'aurelia';
import { HighlightAttribute } from './highlight';
import { BlueHighlightAttribute } from './blue-highlight';

// Incorrect: Attempting to register two attributes with the same name globally
// Aurelia.register(HighlightAttribute, BlueHighlightAttribute) /* ... */;

// Correct: Register only one implementation for the name 'highlight'
Aurelia.register(HighlightAttribute) /* ... */;

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

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

Debugging Tips

• Search your project for the attribute name (<attribute-name>) from the warning to find all @customAttribute usages with that name.

• Check global registrations in main.ts (or equivalent).

• Inspect dependencies arrays in component/element definitions.

• Verify naming conventions if used.

</rewritten_file>