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

```
```