AUR0807

Error Message

AUR0807: Composition has already been activated/deactivated. Id: <controller-id>

Where <controller-id> is an identifier for the <au-compose> element's controller experiencing the issue.

Description

This error indicates an internal state management problem within the <au-compose> element. It is thrown when <au-compose> attempts to start activating a new component when it believes a previous composition is still activating, or when it attempts to start deactivating the current component when it believes a deactivation is already in progress. This is based on the status of an internal promise (this.composition) used to track the ongoing composition lifecycle.

Cause

This error is generally not caused directly by application code interacting with <au-compose>'s public API but rather points to potential issues like:

1. Internal Logic Error: A possible bug within the state management or asynchronous handling of the <au-compose> element itself.

2. Rapid Conflicting Updates: Very frequent and potentially overlapping changes to the component, view-model, or view bindables of <au-compose> might, in rare edge cases or complex scenarios, lead to race conditions where the internal state becomes inconsistent.

3. Lifecycle Hook Issues: Errors or unexpected asynchronous behavior within the lifecycle hooks (activate, deactivate, detaching, etc.) of the component being composed might potentially interfere with <au-compose>'s tracking, although this is less likely to be the direct cause of this specific error message.

Solution

1. Simplify <au-compose> Usage: If the <au-compose> element is involved in complex conditional logic or receives rapidly changing bindable values, try simplifying the scenario to see if the error persists. Ensure that updates to its bindables are predictable and not happening in quick, potentially overlapping succession.

2. Review Composed Component Lifecycles: While less likely the direct cause, ensure the component being composed doesn't have lifecycle hooks (activate, deactivate, etc.) that throw uncaught errors or behave in highly unusual asynchronous ways that might interfere with the composition process.

3. Check Aurelia Version: Ensure you are using a recent/stable version of Aurelia, as internal bugs are fixed over time.

4. Report the Issue: If the cause isn't apparent from simplifying your usage, this might indicate an internal Aurelia bug. Please try to create a minimal reproduction of the scenario causing the error and report it as an issue on the Aurelia GitHub repository, including the error message, stack trace, relevant code snippets, and Aurelia version.

Example

It's difficult to provide a direct code example that reliably triggers this specific internal state error, as it often depends on timing and internal implementation details. However, scenarios involving rapid, asynchronous updates to <au-compose> bindables are more likely candidates.

<!-- Hypothetical scenario: Rapidly changing the component -->
<au-compose component.bind="currentComponent"></au-compose>
<button click.trigger="changeComponentQuickly()">Change</button>

// View Model
import { customElement } from 'aurelia';
import { ComponentOne } from './component-one';
import { ComponentTwo } from './component-two';

@customElement({ /* ... */ })
export class MyApp {
  currentComponent: unknown = ComponentOne;

  changeComponentQuickly() {
    // Rapid changes might, in edge cases, cause issues.
    this.currentComponent = ComponentTwo;
    setTimeout(() => { this.currentComponent = ComponentOne; }, 1); // Very short delay
    setTimeout(() => { this.currentComponent = ComponentTwo; }, 2);
  }
}

(Note: This example is illustrative and might not trigger AUR0807 directly, but represents the type of rapid updates that could potentially lead to such internal state issues.)

Debugging Tips

• Focus on the logic that updates the bindables (component, view-model, view) of the specific <au-compose> instance throwing the error.

• Try adding delays or debouncing updates to <au-compose> bindables to see if it prevents the error, which would suggest a race condition.

• Use browser developer tools to examine the <au-compose> element's controller instance ($controller property in the scope or via element inspection) and look at its internal state, particularly any composition promise, if possible.

• Simplify the composed component to a very basic one to rule out issues within its lifecycle hooks.