# AUR0203

## Error Message

`AUR0203: Trying to retrieve a property or build a scope from a null/undefined scope`

## Description

This error indicates an attempt was made to perform an operation that requires a valid binding scope (like looking up a property or creating a child scope), but the operation was initiated on a scope object that was `null` or `undefined`.

## Cause

This error typically points to an issue within the component's structure or lifecycle, where a part of the component tree or binding system has become detached or wasn't properly initialized within the Aurelia scope hierarchy. Possible causes include:

1. **Detached Elements/Components:** Attempting to bind or interact with elements or components that have been manually removed from the DOM or are otherwise not part of a connected Aurelia component tree with a valid root scope.
2. **Incorrect Component Structure:** Issues with custom element composition, template controllers (`if.bind`, `repeat.for`), or view creation/caching logic that might lead to orphaned scopes.
3. **Lifecycle Timing:** Attempting operations that require a scope (like accessing binding contexts) too early or too late in the component lifecycle, when the scope might not be available or has already been disposed.
4. **Manual Scope Manipulation:** Incorrectly manipulating scope objects manually, leading to `null` or `undefined` references.
5. **Internal Errors:** In rare cases, this could indicate an internal error within the Aurelia runtime's scope management.

## Solution

Resolving this error often involves investigating the component structure and lifecycle interactions:

1. **Verify Component Hierarchy:** Ensure that the element or component involved in the error is correctly nested within an Aurelia application or component tree and hasn't been improperly manipulated outside of Aurelia's control.
2. **Check Template Controller Logic:** If using `if.bind`, `repeat.for`, `au-compose`, `portal`, etc., review the bindings and associated view models to ensure they are correctly managing scope creation and destruction.
3. **Review Lifecycle Hooks:** Ensure that operations requiring scope access are performed within appropriate lifecycle hooks (e.g., `bound`, `attaching`) and not during stages where the scope might be unavailable (`dispose`, `unbinding`).
4. **Avoid Manual Scope Manipulation:** Refrain from directly manipulating `Scope` objects unless you have a deep understanding of Aurelia's internal mechanisms.
5. **Simplify and Isolate:** Temporarily simplify the component's template and view model involved in the error to isolate the problematic section. Check if bindings involving `$parent`, `$host`, or complex context lookups are involved.

## Example

While a direct, simple reproduction is difficult as it often depends on complex interactions, consider scenarios like:

```html
<!-- Potentially problematic if <my-child> somehow detaches -->
<!-- or its internal logic tries to access parent scope after detachment -->
<my-parent>
  <my-child if.bind="isAttached"></my-child>
</my-parent>

<!-- Using view references incorrectly -->
<template with.bind="getViewReference()">
  <!-- If getViewReference() returns a view not properly scoped -->
  <au-compose view.bind="someView"></au-compose>
</template>
```

```typescript
// View Model example potentially leading to scope issues if managed incorrectly
import { customElement, IViewFactory, Controller, Scope } from 'aurelia';

@customElement({ /* ... */ })
export class MyParent {
  isAttached = true;
}

// Assume MyChild tries to access parent scope in a problematic way
@customElement({ /* ... */ })
export class MyChild {
  private scope: Scope | null = null;

  binding(initiator: Controller, parent: Controller) {
    // Storing scope might be okay, but using it after detachment can cause issues
    this.scope = parent.scope;
  }

  someActionAfterDetached() {
    // If this method is called after the element is detached (isAttached=false)
    // and tries to use this.scope, it might lead to AUR0203 if the scope chain is broken.
    if (this.scope) {
      // This call could potentially trigger the error if the scope is invalid
      // Scope.create(this.scope, {});
      // this.scope.find(...)
    }
  }
}
```

## Debugging Tips

* Identify the component or binding expression involved by examining the stack trace.
* Use browser developer tools to place breakpoints within the lifecycle hooks (`binding`, `bound`, `attaching`, `detaching`, `unbinding`) of the relevant components to observe the state of the scope (`this.$controller.scope`).
* Analyze interactions between parent and child components, especially those involving template controllers or dynamic composition.
* Check for any manual DOM manipulation that might interfere with Aurelia's element and scope tracking.
* Look for bindings that traverse the scope hierarchy (`$parent`, `$host`) and verify their validity in the context where the error occurs.