AUR0101

Error Message

AUR0101: Ast eval error: binding behavior "<behavior_name>" could not be found. Did you forget to register it as a dependency?

Where <behavior_name> is the name of the binding behavior used in the expression.

Description

This error occurs during the evaluation of a binding expression when a referenced binding behavior (like debounce, throttle, signal, etc.) cannot be located in the application's dependency injection container.

Cause

The most common reasons for this error are:

1. Not Registered: The binding behavior was not registered globally (e.g., using Aurelia.register(...)) or locally within the component that uses it. Aurelia needs to know about the behavior to apply it.

2. Typo: The name of the binding behavior in the template expression is misspelled (e.g., & debouce instead of & debounce).

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

Solution

1. Register the Behavior: Ensure the binding behavior is registered.

   • Global Registration: If the behavior should be available throughout the application, register it during your Aurelia application setup (often in main.ts or main.js).

     import { Aurelia, StandardConfiguration } from 'aurelia';
     import { MyBindingBehavior } from './my-binding-behavior'; // Example
     
     Aurelia
       .register(StandardConfiguration)
       .register(MyBindingBehavior) // Register here
       .app(MyApp)
       .start();

   • Local Registration: If the behavior is specific to a component, register it in the component's dependencies array.

     import { customElement } from 'aurelia';
     import { MyBindingBehavior } from './my-binding-behavior'; // Example
     
     @customElement({
       name: 'my-component',
       template: `<input value.bind="value & myBindingBehavior">`,
       dependencies: [MyBindingBehavior] // Register here
     })
     export class MyComponent {
       value = '';
     }

   • Built-in Behaviors: Standard behaviors like debounce, throttle, signal, updateTrigger, etc., are typically included with StandardConfiguration or DefaultComponents. Ensure you have registered the appropriate configuration.

2. Check Spelling: Carefully verify the spelling of the binding behavior name in your HTML template, ensuring it matches the registered name (usually camelCase converted to kebab-case in the template, e.g., MyBindingBehavior becomes my-binding-behavior, although the original case might also work depending on registration).

3. Verify Plugin Configuration: If the behavior is part of a plugin, consult the plugin's documentation to ensure it was installed and configured correctly in your application's entry point.

Example

<!-- Assumes 'debounce' behavior should be available -->

<!-- Incorrect: Typo in behavior name -->
<input value.bind="searchTerm & debouce:500">

<!-- Incorrect: Assuming 'myCustomBehavior' is not registered -->
<p textcontent.bind="message & myCustomBehavior"></p>

<!-- Correct: Using a standard, registered behavior -->
<input value.bind="searchTerm & debounce:500">

<!-- Correct: Using a custom behavior registered locally or globally -->
<p textcontent.bind="message & myCustomBehavior"></p>

Debugging Tips

• Double-check the registration point (global or local) for the specific binding behavior.

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

• Look at your main.ts (or equivalent startup file) to confirm that necessary configurations (like StandardConfiguration or plugin registrations) are present.

• If it's a custom behavior, ensure it's correctly exported and imported where it's registered.