AUR0810

Error Message

AUR0810: Invalid [else] usage, it should follow an [if]

Description

This error occurs during template linking when Aurelia encounters an element with an else custom attribute, but the immediately preceding element sibling in the DOM (after template compilation) does not have an if.bind attribute or another else attribute. The else attribute must directly follow an if or another else to form a conditional chain.

Cause

1. Incorrect Placement: The element with the else attribute is not placed immediately after the element with the corresponding if.bind or else attribute in the HTML template. There might be other elements, comments (that aren't removed during compilation), or significant whitespace between them.

2. Missing if.bind: The preceding element, which was intended to be the start of the conditional block, is missing the if.bind attribute.

3. Template Manipulation: Manual manipulation of the DOM or compiled template structure before or during linking might disrupt the expected if/else sequence.

4. Syntax Error: A simple typo or syntax error in the template might lead to the else being misinterpreted or misplaced relative to the if.

Solution

1. Verify Placement: Ensure the element with the else attribute is the immediate sibling following the element with if.bind or a preceding else. Remove any intervening elements, comments, or excessive whitespace that might interfere. Remember that Aurelia operates on the structure after template compilation, so whitespace handling by the browser or compiler can sometimes play a role, though typically direct element adjacency is required.

2. Add if.bind: If the preceding element is missing if.bind, add it with the appropriate condition.

3. Check Template Structure: Review the HTML template carefully around the if/else block for any structural issues or typos.

Example

<!-- Correct Structure -->
<div if.bind="condition">Show if true</div>
<div else>Show if false</div>

<!-- Also Correct (Chained else) -->
<div if.bind="status === 'loading'">Loading...</div>
<div else if.bind="status === 'error'">Error occurred</div>
<div else>Data: ${data}</div>

<!-- Incorrect: Intervening element -->
<div if.bind="condition">Show if true</div>
<p>Some other text</p> <!-- This <p> breaks the chain -->
<div else>Show if false</div> <!-- AUR0810 Error -->

<!-- Incorrect: Missing if.bind on the first div -->
<div>Show if true?</div> <!-- Missing if.bind -->
<div else>Show if false</div> <!-- AUR0810 Error -->

<!-- Incorrect: else not immediately following -->
<template>
  <div if.bind="condition">Show if true</div>
</template>
<!-- Some other unrelated element or structure -->
<div else>Show if false</div> <!-- AUR0810 Error: 'else' is not linked to the 'if' -->

Debugging Tips

• Carefully inspect the HTML source template around the if and else elements. Pay close attention to the direct sibling relationship.

• Use the browser's developer tools ("Inspect Element") to look at the DOM structure after Aurelia has processed the template. Verify that the element with else directly follows the element with if (or a previous else) in the rendered DOM structure just before the error occurs (this might require stepping through the linking process or examining the structure just before the error is thrown).

• Temporarily remove the else block and ensure the if block works correctly on its own.

• Simplify the content within the if and else blocks to basic text to rule out complex content interfering with the structure detection.