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

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

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