AUR0813

Error Message

AUR0813: Invalid [pending]/[then]/[catch] usage. The parent [promise].resolve not found; only "*[promise.resolve] > *[pending|then|catch]" relation is supported.

Description

This error occurs during template compilation/linking when an element uses one of the promise state template controller attributes (pending, then, or catch) but is not a direct child of an element with the promise.resolve attribute.

Cause

The pending, then, and catch attributes are designed to work exclusively as direct children of an element managed by promise.resolve. They represent the different states of the promise bound to promise.resolve. This error indicates that this required parent-child relationship is broken in the template structure.

Common causes:

1. Incorrect Nesting: The element with pending, then, or catch is not directly nested inside the element with promise.resolve. There might be intermediate elements, or it might be placed elsewhere entirely.

2. Missing promise.resolve: The promise.resolve attribute is missing from the intended parent element.

3. Typo: A typo in promise.resolve, pending, then, or catch.

Solution

Ensure that any element using pending, then, or catch is a direct child of the element using promise.resolve.

1. Restructure HTML: Adjust the HTML structure so that the pending/then/catch elements are immediate children of the promise.resolve element.

2. Add promise.resolve: Ensure the parent element has the promise.resolve.bind="yourPromise" attribute correctly applied.

3. Check Spelling: Verify the spelling of all related attributes.

Example

<!-- Incorrect: 'pending', 'then', 'catch' are not direct children -->
<div promise.resolve.bind="myPromise">
  <div>
    <div pending>Loading...</div>
    <div then="result">Data: ${result}</div>
    <div catch="err">Error: ${err.message}</div>
  </div>
</div>

<!-- Incorrect: Missing promise.resolve on parent -->
<div>
  <div pending>Loading...</div>
  <div then="result">Data: ${result}</div>
  <div catch="err">Error: ${err.message}</div>
</div>

<!-- Correct: 'pending', 'then', 'catch' are direct children -->
<div promise.resolve.bind="myPromise">
  <div pending>Loading...</div>
  <div then="result">Data: ${result}</div>
  <div catch="err">Error: ${err.message}</div>
</div>

<!-- Correct: Using <template> as direct children -->
<div promise.resolve.bind="myPromise">
  <template pending>
    <p>Please wait...</p>
  </template>
  <template then="data">
    <h1>${data.title}</h1>
  </template>
  <template catch="errorInfo">
    <p class="error">Failed to load: ${errorInfo.message}</p>
  </template>
</div>

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

@customElement({ /* ... */ })
export class MyComponent {
  myPromise: Promise<any>;

  constructor() {
    // Example promise
    this.myPromise = new Promise((resolve, reject) => {
      setTimeout(() => {
        if (Math.random() > 0.5) {
          resolve({ title: 'Data Loaded Successfully' });
        } else {
          reject(new Error('Failed to fetch data'));
        }
      }, 1500);
    });
  }
}

Debugging Tips

• Carefully examine the HTML structure in your template where the promise.resolve, pending, then, and catch attributes are used.

• Ensure there are no intervening elements between the promise.resolve element and its state elements (pending/then/catch).

• Use the browser's element inspector to verify the final rendered structure, although this error often occurs during compilation/linking before full rendering.

• Check for typos in the attribute names.