AUR0751

Error Message

AUR0751: Attempted to reference "<property>", but it was not found amongst the target's API.

Where <property> is the name specified in the ref attribute in the template.

Description

This error occurs during component initialization (hydration) when the ref attribute is used on an element in the template (e.g., <div ref="myElement">), but the corresponding property (myElement in this case) does not exist on the component's view model instance. The ref attribute requires a matching property on the view model to assign the element reference to.

Cause

1. Typo: The property name specified in the ref attribute in the template does not exactly match the property name declared in the view model class (case-sensitive).

2. Missing Property: The property was never declared in the view model class.

3. Incorrect Scope/Instance: Although rare for ref, in complex scenarios, the context might be such that the expected view model instance isn't the one being used, though typically ref operates directly on the component's own view model.

Solution

1. Check Spelling: Ensure the property name used in the ref="propertyName" attribute in your HTML template exactly matches the property name declared in your component's TypeScript/JavaScript class, including case.

2. Declare the Property: Add the missing property declaration to your view model class. The type should typically be the appropriate HTMLElement type (e.g., HTMLInputElement, HTMLDivElement, HTMLElement) or Element.

Example

Template (HTML):

<template>
  <input ref="emailInput" type="email" placeholder="Enter email">
  <div ref="containerDiv">Some content</div>

  <!-- Incorrect: Typo 'userNmaeInput' vs 'usernameInput' -->
  <input ref="userNmaeInput" type="text">

  <!-- Incorrect: 'submitButton' property missing in VM -->
  <button ref="submitButton">Submit</button>
</template>

View Model (TypeScript):

import { customElement } from 'aurelia';

@customElement({ /* template from above */ })
export class MyFormComponent {
  // Correctly declared properties matching refs
  emailInput: HTMLInputElement;
  containerDiv: HTMLDivElement;

  // Correct property name for the input
  usernameInput: HTMLInputElement;

  // Missing property declaration for 'submitButton' would cause AUR0751

  bound() {
    // Properties are assigned *before* bound is called
    console.log(this.emailInput); // Logs the <input> element
    console.log(this.containerDiv); // Logs the <div> element
    console.log(this.usernameInput); // Logs the <input> element

    // Accessing this.submitButton would fail if not declared
    // if (this.submitButton) { /* ... */ }
  }
}

Debugging Tips

• Carefully compare the string value in the ref="..." attribute in your template with the property declaration in your view model. Check for typos, extra spaces, or case mismatches.

• Ensure the property is declared directly on the class instance, not as a static property or within a method scope (unless intentionally managed differently, which is atypical for ref).

• If using dynamic component generation or complex scenarios, verify that the correct view model instance is being associated with the template containing the ref.

</rewritten_file>