AUR0753

Error Message

AUR0753: Attribute <attribute-name> is not registered in <component-name>.

Where <attribute-name> is the name of the custom attribute used in the template, and <component-name> is the name of the component whose template is being rendered.

Description

This error occurs during rendering when Aurelia encounters a custom attribute in the template (e.g., <div my-attribute.bind="..."></div>), but it cannot find the definition for that attribute (my-attribute) within the resources registered for the current component or globally. This applies to regular custom attributes, not template controllers (which have a separate error code, AUR0754).

Cause

The causes are analogous to those for missing custom elements (AUR0752):

1. Missing Import: The custom attribute class was not imported into the component's view model file.

2. Missing dependencies Array: The custom attribute was imported but not included in the dependencies array of the component's definition.

3. Typo in Attribute Name: The name used in the template (e.g., my-attrbute) doesn't match the registered name of the custom attribute (e.g., my-attribute). Attribute names are case-insensitive in HTML but often defined with kebab-case.

4. Incorrect Registration: The attribute is defined elsewhere but wasn't correctly registered globally (Aurelia.register(...)) or locally via dependencies.

5. Build/Bundling Issues: The build process failed to include the attribute definition.

Solution

The solutions mirror those for custom elements:

1. Import the Attribute: Ensure the custom attribute class is imported in the view model file.

2. Add to Dependencies: Add the imported custom attribute class to the dependencies array.

   import { MyAttribute } from './my-attribute';
   import { customElement } from 'aurelia';
   
   @customElement({
     name: 'my-component',
     template: `<div my-attribute></div>`,
     dependencies: [MyAttribute] // <-- Add here
   })
   export class MyComponent { }

3. Verify Name: Check the attribute name in the template against its definition (@customAttribute('my-attribute') or similar).

4. Check Registration: Ensure proper global or local registration.

5. Verify Build: Check the build/bundler configuration and output.

Debugging Tips

• Check the browser's console for the exact error message.

• Verify the import path and the dependencies array.

• Search the codebase for the attribute definition to confirm the name.

• Inspect the browser's loaded sources to see if the attribute's code is present.