AUR0156

Warning Message

AUR0156: Binding behavior <behavior-name> has already been registered.

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

Description

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

Note: This is typically logged as a warning. The application might continue, but only the first registration for the given name will be effective, which could lead to unexpected binding modifications if the duplicate registrations have different logic.

Cause

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

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

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

4. Naming Collision: Accidentally defining two different binding behavior classes that use the same behavior name in their @bindingBehavior decorator.

Solution

1. Ensure Unique Names: Choose a unique name for each binding behavior within its intended scope.

2. Register Once: Ensure each binding behavior 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 behaviors share a name, rename one.

Example

// my-throttle.ts
import { bindingBehavior } from 'aurelia';
@bindingBehavior('myThrottle')
export class MyThrottleBindingBehavior { /* ... */ }

// custom-throttle.ts - Incorrect: Uses the same name
import { bindingBehavior } from 'aurelia';
@bindingBehavior('myThrottle') // Causes AUR0156 if both are registered
export class CustomThrottleBindingBehavior { /* ... */ }

// --- main.ts ---
import { Aurelia } from 'aurelia';
import { MyThrottleBindingBehavior } from './my-throttle';
import { CustomThrottleBindingBehavior } from './custom-throttle';

// Incorrect: Attempting to register two behaviors with the same name globally
// Aurelia.register(MyThrottleBindingBehavior, CustomThrottleBindingBehavior) /* ... */;

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

// --- my-component.ts ---
import { customElement } from 'aurelia';
import { MyThrottleBindingBehavior } from './my-throttle';
// Incorrect: Duplicate local registration
// @customElement({ name: 'my-component', template: '<input value.bind="query & myThrottle">', dependencies: [MyThrottleBindingBehavior, MyThrottleBindingBehavior] })
// export class MyComponent { query = ''; }

// Correct: Register locally only once (if not registered globally)
// @customElement({ name: 'my-component', template: '<input value.bind="query & myThrottle">', dependencies: [MyThrottleBindingBehavior] })
// export class MyComponent { query = ''; }

Debugging Tips

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

• Check global registrations in main.ts.

• Inspect dependencies arrays in component/element definitions.

• Verify naming conventions if used.