AUR0103

Error Message

AUR0103: Ast eval error: value converter "<converter_name>" could not be found. Did you forget to register it as a dependency?

Where <converter_name> is the name of the value converter used in the expression.

Description

This error occurs during the evaluation of a binding expression when a referenced value converter (using the | syntax, e.g., amount | currencyFormat) cannot be located in the application's dependency injection container.

Cause

Similar to AUR0101 for binding behaviors, the common reasons are:

1. Not Registered: The value converter was not registered globally (e.g., using Aurelia.register(...)) or locally within the component that uses it. Aurelia needs to be aware of the converter to use it.

2. Typo: The name of the value converter in the template expression is misspelled (e.g., | dateFomat instead of | dateFormat).

3. Incorrect Import/Configuration: If the converter comes from a plugin or package, that package might not have been configured correctly during application startup, or the specific converter wasn't imported/registered as required.

Solution

1. Register the Converter: Ensure the value converter is registered.

   • Global Registration: Register it during your Aurelia application setup for app-wide availability.

     import { Aurelia, StandardConfiguration } from 'aurelia';
     import { DateFormatValueConverter } from './date-format-converter'; // Example
     
     Aurelia
       .register(StandardConfiguration)
       .register(DateFormatValueConverter) // Register here
       .app(MyApp)
       .start();

   • Local Registration: Register it in the component's dependencies array for component-specific use.

     import { customElement } from 'aurelia';
     import { CurrencyFormatValueConverter } from './currency-format-converter'; // Example
     
     @customElement({
       name: 'my-product',
       template: `<p>Price: \${ price | currencyFormat }</p>`,
       dependencies: [CurrencyFormatValueConverter] // Register here
     })
     export class MyProduct {
       price = 123.45;
     }

   • Built-in Converters: Ensure standard configurations like StandardConfiguration or DefaultComponents are registered if you expect default converters to be available.

2. Check Spelling: Verify the spelling of the value converter name in your HTML template (after the |). It should match the registered name (usually camelCase converted to kebab-case, e.g., CurrencyFormatValueConverter becomes currency-format).

3. Verify Plugin Configuration: If the converter is from a plugin, check the plugin's documentation for correct installation and configuration steps.

Example

<!-- Assumes 'dateFormat' and 'sort' converters should be available -->

<!-- Incorrect: Typo in converter name -->
<p>Date: ${ eventDate | dateFomat:'yyyy-MM-dd' }</p>

<!-- Incorrect: Assuming 'myCustomConverter' is not registered -->
<p>Value: ${ rawValue | myCustomConverter }</p>

<!-- Correct: Using registered converters -->
<p>Date: ${ eventDate | dateFormat:'yyyy-MM-dd' }</p>
<ul>
  <li repeat.for="item of items | sort:'name'">...</li>
</ul>

Debugging Tips

• Check where the value converter is defined and where it's supposed to be registered (globally or locally).

• Confirm the exact registered name and compare it (case-insensitively, considering kebab-case conversion) with the name used in the template.

• Inspect your application's startup configuration (main.ts or equivalent).

• Ensure the value converter class is correctly exported and imported for registration.