AUR0653

Error Message

AUR0653: Mapping for property <property> of <<nodeName> /> already exists

Where <property> is the property name and <nodeName> is the HTML element tag name (e.g., INPUT, DIV) for which a duplicate mapping was attempted.

Description

This error occurs during the Aurelia application startup configuration phase, specifically when using .withConfig() and attempting to register a custom node observation strategy (a way to teach Aurelia how to observe a specific property on a specific type of HTML element). It indicates that a strategy for the exact same combination of element tag name and property name has already been registered, either by Aurelia's default configuration or by a previous custom registration.

Cause

1. Duplicate Registration: You are attempting to register a custom observer mapping for an element/property combination that is already handled, either by Aurelia's built-in observers (e.g., trying to re-register an observer for the value property of <input>) or by another custom registration earlier in your configuration code.

2. Third-Party Plugin Conflict: A third-party plugin you are using might be registering the same observer mapping that your code is also trying to register.

3. Case Sensitivity Issues (Less Common): While HTML tags/properties are generally case-insensitive, internal registration keys might sometimes be case-sensitive. Ensure consistency in casing (value vs Value).

Solution

1. Remove Redundant Registration: Review your Aurelia configuration code (typically in main.ts or wherever Aurelia.register and .withConfig() are used). Remove the attempt to register the observer mapping identified in the error message if it's unnecessary (i.e., if the default behavior is sufficient or if another registration already covers it).

2. Check Plugin Conflicts: If using third-party plugins that modify observation behavior, consult their documentation or temporarily disable them to see if the conflict resolves. You might need to adjust your configuration order or avoid registering mappings that plugins already provide.

3. Ensure Necessity: Only register custom node observer mappings if you genuinely need to override or provide observation logic for a property/element combination that Aurelia doesn't handle by default or doesn't handle in the way you require. Standard properties on standard elements usually don't need custom mappings.

Example

// In main.ts or configuration module
import { Aurelia, NodeObserverLocator, PropertyRule } from 'aurelia';

// Assume we want to register a custom observer for 'value' on 'input'
// This is INCORRECT because Aurelia already has a default strategy for this.
class CustomValueObserver { /* ... observer logic ... */ }

Aurelia
  .register(/* ... other configurations ... */)
  .withConfig((container, config) => {
    const builder = container.get(NodeObserverLocator.Builder);

    // --- This line would cause AUR0653 ---
    builder.useMapping(
      PropertyRule.define(
        (node: Node) => node.nodeName === 'INPUT',
        'value', // Property name
        () => CustomValueObserver // Observer type
      )
    );
    // ------------------------------------

    // Register other *necessary* custom mappings here
  })
  .app(MyApp)
  .start();

Debugging Tips

• Identify the exact <property> and <nodeName> from the error message.

• Search your codebase (especially configuration files) for .useMapping or similar observer registration calls related to that property and node name.

• Check if the combination corresponds to a standard HTML element and property that Aurelia likely observes by default (e.g., value, checked, selected, scrollTop, scrollLeft, src, style, css). If so, your custom registration is likely redundant.

• Temporarily comment out your custom .useMapping calls one by one to pinpoint the specific registration causing the conflict.

• Review the documentation of any UI component libraries or Aurelia plugins you are using, as they might register observers automatically.

</rewritten_file>