# 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):**

```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):**

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