AUR0152

Error Message

AUR0152: No value converter definition found for type <TypeName>

Where <TypeName> is the name of the class associated with the value converter.

Description

This error occurs when Aurelia attempts to resolve a value converter resource (e.g., used in a binding expression like myProp | myConverter) but cannot find the associated definition metadata for the specified type (class). Value converter definitions are typically created using the @valueConverter('converter-name') decorator or by following naming conventions recognized by Aurelia (like MyConverterValueConverter).

Cause

Common causes for this error include:

1. Missing Decorator or Convention: The class intended to be a value converter is missing the @valueConverter('converter-name') decorator, and it doesn't follow a recognized naming convention (like MyConverterValueConverter).

2. Incorrect Registration: The value converter class was defined but not correctly registered with the Aurelia container, either globally (Aurelia.register(...)) or locally within a component's dependencies array.

3. Build/Packaging Issues: The build process might not be correctly including or processing the value converter file, or there might be issues with module resolution.

4. Typo in Class Name: The class name provided during registration or inferred by convention might have a typo.

Solution

1. Add Decorator/Follow Convention: Ensure your value converter class has the @valueConverter('converter-name') decorator applied, or that it follows the *ValueConverter naming convention.

2. Register the Converter: Verify that the value converter is registered correctly.

   • Global Registration: Use Aurelia.register(MyValueConverter) in your main application setup (main.ts or similar).

   • Local Registration: Add the value converter class to the dependencies array of the component definition where it's used: @customElement({ name: 'my-component', template, dependencies: [MyValueConverter] }).

3. Check Build Configuration: Ensure your build setup (e.g., Webpack, Vite) is configured to correctly process and bundle Aurelia resources, including decorators and conventions. Verify module imports and exports.

4. Verify Class Name: Double-check the spelling of the value converter class name in its definition and registration.

Example

// date-format-value-converter.ts
import { valueConverter } from 'aurelia';

// Correct: Using the decorator
@valueConverter('dateFormat')
export class DateFormatValueConverter {
  toView(value: Date | string | number, format: string = 'yyyy-MM-dd'): string {
    // Basic example, consider using a date library for robust formatting
    try {
      const date = new Date(value);
      // Super simple example format
      if (format === 'yyyy-MM-dd') {
        return date.toISOString().split('T')[0];
      }
      return date.toLocaleString();
    } catch {
      return 'Invalid Date';
    }
  }
}

// Incorrect: Missing decorator and doesn't follow convention
// export class DateFormat { /* ... */ } // This would likely cause AUR0152 if used

// --- main.ts or component definition ---
import { Aurelia } from 'aurelia';
import { DateFormatValueConverter } from './date-format-value-converter';
// import { MyComponent } from './my-component'; // If registering locally

// Global Registration:
// Aurelia.register(DateFormatValueConverter) /* ... */;

// Local Registration (in my-component.ts):
// @customElement({
//   name: 'my-component',
//   template: `<p>Today: ${today | dateFormat}</p>`,
//   dependencies: [DateFormatValueConverter] // Register locally
// })
// export class MyComponent { today = new Date(); }

Debugging Tips

• Verify the exact name (<TypeName>) mentioned in the error message matches the intended class name.

• Search your codebase for the value converter's class name and decorator (@valueConverter) to ensure it's defined correctly.

• Check your main.ts (or equivalent startup file) for global registrations.

• Check the dependencies array of the component(s) where the value converter is used.

• Inspect the build output or use browser developer tools to see if the value converter module is loaded correctly.