AUR0816

Error Message

AUR0816: Invalid [default-case] usage. Multiple 'default-case's are not allowed.

Description

This error occurs during template compilation/linking when an element using the switch attribute has more than one direct child element marked with the default-case attribute.

Cause

The switch controller allows for multiple case attributes, each matching a specific value. However, it permits only zero or one default-case attribute to handle scenarios where none of the specific case values match the value bound to switch. This error indicates that you have provided more than one default-case within the same switch block.

Solution

Ensure that within any given switch block, there is at most one element marked with the default-case attribute.

1. Remove Extra default-case: Review the children of the switch element and remove all but one default-case attribute.

2. Combine Logic: If you need complex default logic, place it within a single default-case element or <template default-case>.

3. Use case Instead: If a condition was mistakenly marked as default-case, change it to a specific case="someValue" if appropriate.

Example

<!-- Assume 'status' is a property on the view model -->

<!-- Incorrect: Multiple default-case elements -->
<div switch.bind="status">
  <div case="'active'">User is Active</div>
  <div default-case>Status Unknown</div>
  <p default-case>Please contact support if status is unexpected.</p> <!-- Second default-case -->
</div>

<!-- Correct: Only one default-case element -->
<div switch.bind="status">
  <div case="'active'">User is Active</div>
  <div case="'inactive'">User is Inactive</div>
  <div default-case>
    <p>Status Unknown.</p>
    <p>Please contact support.</p>
  </div>
</div>

<!-- Correct: Using <template> for default case -->
<div switch.bind="status">
  <template case="'active'">
    <span class="status-active">Active</span>
  </template>
  <template default-case>
    <span class="status-unknown">Unknown</span>
  </template>
</div>

<!-- Correct: No default-case (optional) -->
<div switch.bind="status">
  <div case="'active'">User is Active</div>
  <div case="'inactive'">User is Inactive</div>
  <!-- No default case needed -->
</div>

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

@customElement({ /* ... */ })
export class MyComponent {
  status = 'pending'; // Example value
}

Debugging Tips

• Carefully review all direct children of the element with the switch attribute.

• Count the number of children that have the default-case attribute; ensure the count is 0 or 1.

• Check for typos that might have accidentally resulted in multiple default-case attributes (e.g., copy-paste errors).