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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aurelia.io/developer-guides/error-messages/runtime-html/aur0808.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.