# AUR0114

## Error Message

`AUR0114: Ast eval error: cannot access property "<property>" of <value>.`

Where `<property>` is the name of the property being accessed, and `<value>` is typically `null` or `undefined`.

## Description

This error occurs during the evaluation of a binding expression when an attempt is made to access a property via dot notation (e.g., `user.name`) on an object that is currently `null` or `undefined`.

## Cause

The root cause is trying to read a property from a value that doesn't have properties. This usually happens because:

1. **Uninitialized Object:** The object variable (`user` in the example) has not yet been assigned a value, or has been explicitly set to `null` or `undefined`.
2. **Asynchronous Data:** Data is being loaded asynchronously, and the binding expression evaluates before the data (and thus the object) is available.
3. **Function/API Call Result:** A function or method called returns `null` or `undefined` instead of the expected object.
4. **Conditional Logic:** The variable might hold an object under some conditions but `null` or `undefined` under others.

## Solution

1. **Use Optional Chaining (`?.`):** The safest and most common solution is to use the optional chaining operator (`?.`). This will stop the evaluation and return `undefined` if the object on the left is `null` or `undefined`, preventing the error. Example: `user?.name`.
2. **Provide Default Values:** Ensure the object is initialized with a default value (e.g., an empty object `{}`) in the view model.
3. **Conditional Rendering/Binding:** Use `if.bind` to render the part of the template that accesses the property only when the object is not `null` or `undefined`.
4. **Nullish Coalescing (`??`):** For displaying a default value when the property access results in `undefined` (due to optional chaining or otherwise), use the nullish coalescing operator. Example: `${user?.name ?? 'N/A'}`.

## Example

```html
<!-- Assume 'currentUser' might be null initially -->

<!-- Incorrect: Throws AUR0114 if 'currentUser' is null -->
<p>Welcome, ${ currentUser.firstName }</p>
<input type="text" value.bind="currentUser.email">

<!-- Correct: Using Optional Chaining (?.) -->
<p>Welcome, ${ currentUser?.firstName }</p>
<input type="text" value.bind="currentUser?.email">

<!-- Correct: Optional Chaining with Nullish Coalescing (??) for default -->
<p>Welcome, ${ currentUser?.firstName ?? 'Guest' }</p>
<input type="text" value.bind="currentUser?.email ?? ''">

<!-- Correct: Using if.bind to conditionally render -->
<template if.bind="currentUser">
  <p>Welcome, ${ currentUser.firstName }</p>
  <input type="text" value.bind="currentUser.email">
</template>
<template else>
  <p>Loading user...</p>
</template>
```

```typescript
// View Model Example
import { customElement } from 'aurelia';

interface User {
  id: number;
  firstName: string;
  email: string;
}

@customElement({ /* ... */ })
export class UserProfile {
  // currentUser might be null until loaded
  currentUser: User | null = null;

  constructor() {
    // Simulate async loading
    setTimeout(() => {
      this.currentUser = { id: 1, firstName: 'Jane', email: 'jane@example.com' };
    }, 1500);
  }

  // Alternative: Initialize with a default object (if appropriate)
  // currentUser: User | null = { id: 0, firstName: '', email: '' };
}
```

## Debugging Tips

* Identify the exact expression causing the error (e.g., `currentUser.firstName`).
* Inspect the value of the object part (`currentUser`) just before the property access using `console.log` or debugger tools. Check if it's `null` or `undefined`.
* Trace back where `currentUser` is assigned its value. Pay attention to asynchronous operations (like `fetch`, `setTimeout`) or conditional logic that might result in a null/undefined state.
* Implement optional chaining (`?.`) as the primary fix.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aurelia.io/developer-guides/error-messages/runtime-html/aur0114.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.