AUR0652

Error Message

AUR0652: Aurelia is unable to observe property <property>. Register observation mapping with .useConfig().

Where <property> is the name of the DOM element property that Aurelia tried to observe.

Description

This error occurs when Aurelia's binding system attempts to create an observer for a specific property on an HTML element node, but it cannot find a suitable observation strategy for that combination of element type and property name. Aurelia comes with built-in observers for common properties (like value on <input>, checked on checkboxes, scrollTop on elements, etc.), but this error indicates the requested property is not covered by the default strategies.

Cause

1. Binding to Non-Standard/Custom Properties: You are trying to bind to a property on a standard HTML element that Aurelia doesn't observe by default (e.g., binding directly to a less common DOM property or a custom property added to an element).

2. Typo: The property name in the binding expression might be misspelled (e.g., valuee.bind instead of value.bind).

3. Missing Configuration for Custom Elements/Attributes: If you are working with custom elements or attributes that need specific observation logic (perhaps interacting with third-party libraries or complex components), the necessary observation strategy might not have been registered with Aurelia's NodeObserverLocator.

Solution

1. Verify Property Name: Double-check the spelling of the property name in your binding expression in the HTML template. Ensure it matches the actual DOM property you intend to observe.

2. Use Standard Bindable Properties: For custom elements, prefer defining @bindable properties in your view model and bind to those, rather than trying to directly observe arbitrary DOM properties of the custom element's host.

3. Register Custom Observation Strategy: If you genuinely need to observe a specific, non-standard DOM property, you may need to implement and register a custom IObserverLocator or INodeObserverLocator strategy. This is an advanced scenario, typically required when integrating with libraries that manipulate the DOM in non-standard ways or for observing properties not natively supported. You would register this during your application's startup configuration phase using .withConfig().

Example

<!-- Incorrect: Assuming 'customProp' is not a standard bindable property -->
<!-- nor has a registered observer -->
<my-element custom-prop.bind="value"></my-element>

<!-- Incorrect: Typo in standard property -->
<input valuee.bind="name"> <!-- Should be 'value' -->

<!-- Correct: Binding to a standard, observable property -->
<input value.bind="name">

<!-- Correct: Binding to a properly defined bindable property -->
<!-- on a custom element -->
<my-element normal-bindable.bind="value"></my-element>

// View Model for my-element
import { bindable, customElement } from 'aurelia';

@customElement('my-element')
export class MyElement {
  // This is the correct way to make a property bindable
  @bindable normalBindable: string;

  // This property exists, but without @bindable or a custom observer,
  // trying to bind to 'customProp' from the outside might cause AUR0652
  // if Aurelia doesn't know how to observe it directly on the host element.
  customProp: string;
}

Debugging Tips

• Carefully inspect the property name <property> mentioned in the error message.

• Check the HTML element type associated with the binding.

• If it's a standard HTML element, verify if the property is commonly observed by Aurelia (like value, checked, scrollTop, scrollLeft, css, style properties). If not, direct observation might not be supported.

• If it's a custom element, ensure you are binding to a property explicitly marked with @bindable in the element's view model.

• Consider if the property is part of a third-party library integration; you might need specific configuration or adapters provided by that library or custom observation logic.