AUR0815

Error Message

AUR0815: Invalid [case/default-case] usage. The parent [switch] not found; only "*[switch] > *[case|default-case]" relation is supported.

Description

This error occurs during template compilation/linking when an element uses a case or default-case template controller attribute, but it is not a direct child of an element with the switch attribute.

Cause

The case and default-case attributes are designed to work exclusively as direct children of an element managed by the switch attribute. They represent the different conditional branches based on the value bound to switch. This error indicates that the required parent-child relationship is missing or broken in the template structure.

Common causes:

1. Incorrect Nesting: The element with case or default-case is not directly nested inside the element with switch. There might be intermediate elements, or it might be placed elsewhere entirely.

2. Missing switch Attribute: The switch attribute (e.g., switch.bind="status") is missing from the intended parent element.

3. Typo: A typo in switch, case, or default-case.

Solution

Ensure that any element using case or default-case is a direct child of the element using the switch attribute.

1. Restructure HTML: Adjust the HTML structure so that the case/default-case elements are immediate children of the switch element.

2. Add switch Attribute: Ensure the parent element has the switch.bind="yourValue" attribute correctly applied.

3. Check Spelling: Verify the spelling of all related attributes (switch, case, default-case).

Example

<!-- Assume 'user.role' is a property on the view model -->

<!-- Incorrect: 'case'/'default-case' are not direct children -->
<div switch.bind="user.role">
  <div>
    <div case="admin">Admin Controls</div>
    <div case="editor">Editor Tools</div>
    <div default-case>View Only</div>
  </div>
</div>

<!-- Incorrect: Missing 'switch' attribute on parent -->
<div>
  <div case="admin">Admin Controls</div>
  <div default-case>View Only</div>
</div>

<!-- Correct: 'case'/'default-case' are direct children -->
<div switch.bind="user.role">
  <div case="admin">Admin Controls</div>
  <div case="editor">Editor Tools</div>
  <div default-case>View Only</div>
</div>

<!-- Correct: Using <template> as direct children -->
<div switch.bind="user.role">
  <template case="admin">
    <button>Manage Users</button>
  </template>
  <template case="editor">
    <button>Edit Content</button>
  </template>
  <template default-case>
    <p>Welcome, guest!</p>
  </template>
</div>

// View Model Example
import { customElement } from 'aurelia';

@customElement({ /* ... */ })
export class MyComponent {
  user = {
    role: 'editor' // Example value
  };

  changeRole(newRole: string) {
    this.user.role = newRole;
  }
}

Debugging Tips

• Carefully inspect the HTML structure in your template around the switch, case, and default-case attributes.

• Verify that there are no intermediate elements between the switch element and its case/default-case children.

• Use the browser's element inspector to check the compiled structure if possible, though this error often happens before rendering.

• Check for typos in the attribute names (switch, case, default-case).

• Ensure the switch attribute is correctly bound (e.g., switch.bind="...").