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:
Incorrect Nesting: The element with
caseordefault-caseis not directly nested inside the element withswitch. There might be intermediate elements, or it might be placed elsewhere entirely.Missing
switchAttribute: Theswitchattribute (e.g.,switch.bind="status") is missing from the intended parent element.Typo: A typo in
switch,case, ordefault-case.
Solution
Ensure that any element using case or default-case is a direct child of the element using the switch attribute.
Restructure HTML: Adjust the HTML structure so that the
case/default-caseelements are immediate children of theswitchelement.Add
switchAttribute: Ensure the parent element has theswitch.bind="yourValue"attribute correctly applied.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, anddefault-caseattributes.Verify that there are no intermediate elements between the
switchelement and itscase/default-casechildren.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
switchattribute is correctly bound (e.g.,switch.bind="...").
Last updated
Was this helpful?