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

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

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

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