AUR0719

Attribute yyyy has been already registered for <zzzz />

Error message

Attribute {{0}} has been already registered for {{1:element}}

Parameters

1. attributeName: The name of the attribute for which a duplicate mapping was attempted.

2. elementName: The name of the element tag (* for global) for which the duplicate mapping was attempted.

Error explanation

This error occurs when configuring the AttrMapper service. You are attempting to register a mapping for an HTML attribute (e.g., mapping innerhtml to the innerHTML property) for a specific element tag (or globally using *), but a mapping for that exact attribute name already exists for that element tag (or globally). Each attribute can only have one mapping rule per element tag (or globally).

Common causes

• Calling attrMapper.useMapping() or attrMapper.useGlobalMapping() multiple times with the same attribute name for the same element tag.

• Plugins registering conflicting global or element-specific attribute mappings.

How to fix

• Review your attribute mapping configuration (calls to useMapping and useGlobalMapping).

• Ensure that each attribute name is mapped only once per element tag (and only once globally if using *).

• If using plugins that configure attribute mappings, check for conflicts between the plugin's mappings and your own, or between multiple plugins. Resolve the conflict by adjusting your configuration or potentially reporting an issue to the plugin author.

Example of Incorrect Usage:

import { IAttrMapper } from '@aurelia/template-compiler';
import { IContainer } from '@aurelia/kernel';

// In your configuration logic (e.g., main.ts)
const container: IContainer = /* ... get container ... */;
const attrMapper = container.get(IAttrMapper);

// First mapping for 'input' elements
attrMapper.useMapping({
  input: {
    'my-value': 'value'
  }
});

// Error: Trying to register 'my-value' again for 'input'
attrMapper.useMapping({
  input: {
    'my-value': 'inputValue' // Duplicate attribute 'my-value' for 'input'
  }
});

// --- Or ---

// Global mapping
attrMapper.useGlobalMapping({
  'data-id': 'elementId'
});

// Error: Trying to register 'data-id' again globally
attrMapper.useGlobalMapping({
  'data-id': 'recordId' // Duplicate global attribute 'data-id'
});

Example of Correct Usage:

import { IAttrMapper } from '@aurelia/template-compiler';
import { IContainer } from '@aurelia/kernel';

const container: IContainer = /* ... get container ... */;
const attrMapper = container.get(IAttrMapper);

// Define all mappings for an element tag together
attrMapper.useMapping({
  input: {
    'my-value': 'value',
    'readonly': 'readOnly'
  },
  div: {
    'innerhtml': 'innerHTML'
  }
});

// Define all global mappings together
attrMapper.useGlobalMapping({
  'data-id': 'elementId',
  'aria-label': 'ariaLabel'
});