# AUR0204

## Error Message

`AUR0204: Trying to create a scope with null/undefined binding context`

## Description

This error occurs when the Aurelia runtime attempts to create a new binding scope, typically a root scope for a component or the application, but the provided binding context (usually the view model instance or an object containing data) is `null` or `undefined`. Every scope needs a valid binding context object to resolve bindings against.

## Cause

This error usually arises during the bootstrapping phase of an Aurelia application or component, indicating that the primary view model or data context wasn't provided correctly. Common causes include:

1. **Missing Root View Model:** When starting an Aurelia application (e.g., using `Aurelia.app({ host, component })`), the `component` specified resolves to a class, but an instance of that class is not correctly created or provided to the root scope, or the component itself is somehow `null` or `undefined`.
2. **Dynamic Composition Issues:** When using dynamic composition features like `<au-compose>` or programmatic view/controller creation, the `viewModel` or `model` provided for the component being composed evaluates to `null` or `undefined`.
3. **Incorrect Root Component Configuration:** Errors in the definition or instantiation logic of the root component specified in the application startup configuration.
4. **Dependency Injection Problems:** The root view model class might be specified, but the dependency injection container fails to create an instance (perhaps due to missing dependencies or configuration errors), resulting in a `null` context.
5. **Manual Scope Creation:** Attempting to manually create a root scope using `Scope.create(null)` or `Scope.create(undefined)`.

## Solution

1. **Verify Root Component:** Ensure the component provided during application startup (`Aurelia.app(...)` or similar bootstrapping) is a valid, constructible class or an actual object instance. Check for typos or configuration errors.
2. **Check `<au-compose>` Bindings:** If using `<au-compose>`, verify that the `viewModel.bind` or `model.bind` attributes are bound to valid class references or object instances, and that they don't evaluate to `null` or `undefined`.
3. **Inspect Dependency Injection:** If the root component uses dependency injection, ensure all its dependencies are correctly registered and injectable. Check the browser's console for any DI-related errors during startup.
4. **Debug Programmatic Creation:** If creating components or views programmatically, ensure a valid view model instance (binding context) is passed when creating the scope or controller.
5. **Avoid Manual Null Context:** Do not intentionally create root scopes with `null` or `undefined` binding contexts.

## Example

```typescript
// In main.ts or equivalent startup file

import Aurelia from 'aurelia';
import { MyApp } from './my-app'; // Assume MyApp is a valid custom element class

// Correct startup:
Aurelia
  .app({ host: document.querySelector('my-app'), component: MyApp })
  .start();

// Incorrect startup potentially leading to AUR0204:
// let MyAppOrNull = null; // Component reference is null
// Aurelia
//  .app({ host: document.querySelector('my-app'), component: MyAppOrNull })
//  .start();

// Or if MyApp failed to instantiate due to DI issues.
```

```html
<!-- Using au-compose -->
<template>
  <!-- Correct: Assuming MyDynamicComponent is a class or loadedViewModel is an instance -->
  <au-compose view-model.bind="MyDynamicComponent"></au-compose>
  <au-compose view-model.bind="loadedViewModel"></au-compose>

  <!-- Incorrect: If someViewModel evaluates to null or undefined -->
  <au-compose view-model.bind="someViewModelThatMightBeNull"></au-compose>
</template>
```

```typescript
// View model for the au-compose example
import { customElement } from 'aurelia';
import { MyDynamicComponent } from './my-dynamic-component'; // Assume this is a valid component

@customElement({ /* ... */ })
export class ComposerViewModel {
  MyDynamicComponent = MyDynamicComponent; // Reference to the class
  loadedViewModel = new MyDynamicComponent(); // Instance of the component
  someViewModelThatMightBeNull: MyDynamicComponent | null = null; // Potentially null

  constructor() {
    // If this remains null when the <au-compose> binds, AUR0204 could occur
    // setTimeout(() => this.someViewModelThatMightBeNull = new MyDynamicComponent(), 1000);
  }
}
```

## Debugging Tips

* Check the application startup code (`main.ts` or equivalent) and verify the root component configuration.
* Examine the console for any errors during application bootstrapping, especially Dependency Injection errors.
* If using `<au-compose>`, place breakpoints or logs to check the value being passed to `viewModel.bind` or `model.bind` just before composition happens.
* If creating components programmatically, inspect the binding context being provided when creating the controller or scope.

```
```


---

# 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/aur0204.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.