AUR0112

Error Message

AUR0112: Ast eval error: cannot use non-object value for destructuring assignment.

Description

This error occurs when a binding expression attempts to perform a destructuring assignment (e.g., [a, b] = someValue or {x, y} = someValue) but the value on the right-hand side (someValue in the examples) evaluates to null or undefined. JavaScript does not allow destructuring null or undefined.

Cause

The direct cause is attempting to destructure a null or undefined value. This typically happens because:

1. Uninitialized Variable: The variable or property being destructured has not been assigned a value yet, or has been explicitly set to null or undefined.

2. Function/API Call Result: A function or method called within the binding expression returns null or undefined, and this result is then used in a destructuring assignment.

3. Conditional Logic: The value might be an object or array under some conditions but null/undefined under others, and the destructuring happens when it's not an object/array.

Solution

1. Provide Default Values: Ensure the value being destructured is always an object or array. You can provide default values either in the view model or directly in the binding expression using the logical OR operator (||).

2. Conditional Rendering/Binding: Use conditional bindings (if.bind, else) to avoid performing the destructuring assignment if the value is null or undefined.

3. Check Value Before Assignment: Perform the check in the view model logic before the value is used in the template.

Example

<!-- Assume 'data' might be null or undefined -->

<!-- Incorrect: May throw AUR0112 if 'data' is null/undefined -->
<template with.bind="{ item: data.item, value: data.value }">
  <p>${item}: ${value}</p>
</template>

<!-- Correct: Provide a default empty object using || -->
<template with.bind="{ item, value } = data || {}">
  <p>${item}: ${value}</p>
</template>

<!-- Correct: Using array destructuring with default -->
<template with.bind="[first, second] = coordinates || []">
  <p>X: ${first}, Y: ${second}</p>
</template>

<!-- Correct: Using if.bind to avoid destructuring null -->
<template if.bind="data">
  <template with.bind="{ item, value } = data">
    <p>${item}: ${value}</p>
  </template>
</template>
<template else>
  <p>No data available.</p>
</template>

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

@customElement({ /* ... */ })
export class MyComponent {
  // This might be null initially or after some operation
  data: { item: string, value: number } | null = null;
  coordinates: [number, number] | undefined = undefined;

  constructor() {
    // Simulate data loading
    setTimeout(() => {
      // If this assignment doesn't happen or sets data to null,
      // direct destructuring in the template would fail without defaults.
      this.data = { item: 'Example', value: 123 };
      this.coordinates = [10, 20];
    }, 1000);
  }

  // Alternative: Initialize with default empty object/array
  // data: { item: string, value: number } | null = { item: '', value: 0 };
  // coordinates: [number, number] | undefined = [0, 0];
}

Debugging Tips

• Inspect the value of the variable/property being destructured right before the assignment occurs using console.log or browser developer tools.

• Check the logic that assigns a value to the variable/property, especially asynchronous operations or conditional assignments.

• Temporarily remove the destructuring to see if the error disappears, confirming it's the source of the issue.

• Add default values (|| {} or || []) as a quick test to see if it resolves the error.