AUR0759

Error Message

AUR0759: No attribute definition found for type <TypeName>

Where <TypeName> is the name of the class that was expected to be a custom attribute.

Description

This error occurs when Aurelia attempts to retrieve the definition metadata for a custom attribute class but fails to find it. Custom attribute definitions contain essential information like the attribute's name, bindables, and other configurations, typically provided via the @customAttribute decorator or inferred through conventions.

Cause

The most common causes are:

1. Missing Decorator/Convention: The class intended to be a custom attribute is missing the @customAttribute decorator, and it doesn't follow a naming convention that allows Aurelia to automatically recognize it as such (if conventions are enabled).

2. Incorrect Registration: The custom attribute class might be defined but not correctly registered as a dependency within the component or application scope where it's being used.

3. Build/Bundling Issues: Problems during the build process might prevent the decorator metadata from being correctly emitted or associated with the class.

4. Circular Dependencies: Complex circular dependencies involving the custom attribute class might interfere with metadata retrieval.

Solution

1. Apply Decorator: Ensure the class has the @customAttribute('attribute-name') decorator applied, specifying the HTML attribute name.

   import { customAttribute } from 'aurelia';
   
   @customAttribute('my-highlight')
   export class MyHighlightAttribute {
     // ... attribute logic ...
   }

2. Use Naming Convention: If relying on conventions, ensure the class name follows the expected pattern (e.g., MyHighlightCustomAttribute might conventionally map to my-highlight). Verify that conventions are enabled and configured correctly in your Aurelia setup.

3. Register Dependency: Make sure the custom attribute is registered appropriately, either globally in main.ts or locally in the dependencies array of the component/element using it.

   // In main.ts for global registration
   import { MyHighlightAttribute } from './my-highlight-attribute';
   Aurelia.register(MyHighlightAttribute /* ... other registrations */)
          // ...
   
   // Or in a component for local registration
   import { MyHighlightAttribute } from './my-highlight-attribute';
   import { customElement } from 'aurelia';
   
   @customElement({
     name: 'my-component',
     template: `<div my-highlight>...</div>`,
     dependencies: [MyHighlightAttribute]
   })
   export class MyComponent { }

4. Check Build Configuration: Verify your build process (e.g., Webpack, Vite configuration) correctly handles decorators and TypeScript/JavaScript compilation. Ensure emitDecoratorMetadata and experimentalDecorators (or equivalent flags) are enabled in your tsconfig.json.

5. Resolve Circular Dependencies: Analyze and refactor any circular dependencies involving the attribute class.

Debugging Tips

• Verify the @customAttribute decorator is present and correctly spelled on the class definition.

• Check the name provided to the decorator (or inferred by convention) matches the usage in the HTML template.

• Confirm the attribute class is imported and included in the dependencies array of the consuming component or registered globally.

• Inspect the compiled JavaScript output to see if the decorator metadata seems present.

• Temporarily replace the custom attribute usage with standard HTML/bindings to rule out other template issues.