AUR0808

Error Message

AUR0808: Composition has already been deactivated.

Description

This error signals an internal state inconsistency within the <au-compose> element, specifically during its detachment phase. It is thrown when the detaching lifecycle hook of the <au-compose> element attempts to initiate the deactivation process for the composed component, but the internal state indicates that a deactivation is already in progress or has already completed.

Cause

Similar to AUR0807, this error typically stems from internal state management issues rather than direct application code errors:

1. Internal Logic Error: A potential bug in how <au-compose> tracks the deactivation state, possibly related to its internal composition promise.

2. Lifecycle Overlap/Race Condition: Complex scenarios involving rapid attaching/detaching of the <au-compose> element itself, or perhaps unusual interactions with parent component lifecycles, could theoretically lead to overlapping calls or state mismatches during deactivation.

3. External Interference: Although unlikely, external code directly manipulating the DOM or interfering with the standard Aurelia lifecycle might disrupt the expected deactivation sequence.

Solution

The approach to resolving this is similar to AUR0807:

1. Simplify Usage: Reduce complexity around the <au-compose> element. If it's conditionally rendered (if.bind) or part of a repeat.for, ensure the conditions or array changes leading to its detachment are clean and not occurring in rapid, potentially conflicting ways.

2. Review Lifecycles (Host and Composed): Check the detaching hook of the component hosting <au-compose> and the deactivate hook of the component being composed for any unusual synchronous or asynchronous behavior, or uncaught errors.

3. Check Aurelia Version: Ensure you're using a recent and stable version of Aurelia.

4. Report the Issue: If simplification doesn't resolve the issue, gather details (code, steps to reproduce, Aurelia version, stack trace) and report it as a potential bug on the Aurelia GitHub repository after creating a minimal reproduction case.

Example

Triggering this reliably is difficult as it relates to internal state during detachment. A scenario might involve rapidly adding/removing the <au-compose> element from the DOM.

<!-- Hypothetical scenario: Rapidly adding/removing au-compose -->
<template if.bind="showCompose">
  <au-compose component.bind="someComponent"></au-compose>
</template>
<button click.trigger="toggleComposeQuickly()">Toggle</button>

// View Model
import { customElement } from 'aurelia';
import { SomeComponent } from './some-component';

@customElement({ /* ... */ })
export class MyApp {
  showCompose = true;
  someComponent = SomeComponent;

  toggleComposeQuickly() {
    // Rapid toggling might, in edge cases, interfere with
    // the deactivation/detaching sequence.
    this.showCompose = false;
    setTimeout(() => { this.showCompose = true; }, 1); // Very short delay
    setTimeout(() => { this.showCompose = false; }, 2);
  }
}

(Note: This example is illustrative and might not trigger AUR0808 directly.)

Debugging Tips

• Focus on the circumstances under which the <au-compose> element is being detached from the DOM (e.g., if.bind becoming false, removal from a repeated list, host component detachment).

• Add logging within the detaching hook of the host component and the deactivate hook of the composed component to understand the timing of events.

• Use browser developer tools to set breakpoints around the detachment phase of the <au-compose> element and inspect its internal state (like the composition promise) if possible.

• Ensure no external scripts are removing the <au-compose> element from the DOM outside of Aurelia's control.