# 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.

     ```typescript
     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.

     ```typescript
     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

```html
<!-- 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.