AUR0779

Error Message

AUR0779: Invalid portal insertion position: <position>

Where <position> is the invalid value provided to the position bindable attribute of the portal.

Description

This error occurs when using the portal template controller (often implicitly via the portal attribute) and providing an invalid value for the position bindable attribute. The position attribute determines where the portal's content should be inserted relative to its target element.

Cause

The error is caused by setting the position attribute on a portal element or custom attribute to a string value other than the allowed options.

The valid values for the position attribute are:

• 'beforebegin': Before the target element itself.

• 'afterbegin': Just inside the target element, before its first child.

• 'beforeend': Just inside the target element, after its last child. (This is often the default)

• 'afterend': After the target element itself.

Any other string value provided will result in this error.

Solution

1. Check position Value: Review the template where the portal attribute is used and ensure the value bound to the position attribute is one of the four valid strings: 'beforebegin', 'afterbegin', 'beforeend', or 'afterend'.

2. Verify Binding: If the position is dynamically bound (e.g., position.bind="myPosition"), ensure that the view model property (myPosition in this case) always resolves to one of the valid strings.

3. Default Behavior: If you want the default behavior (usually 'beforeend'), you can often omit the position attribute entirely, depending on the portal's configuration.

Example

<!-- Assume 'renderTarget' is an element reference -->

<!-- Incorrect: 'inside' is not a valid position -->
<template portal="target.bind: renderTarget; position: 'inside'">
  <div>My portal content</div>
</template>

<!-- Incorrect: Typo in position value -->
<template portal="target.bind: renderTarget; position: 'beforeEnd'"> <!-- Case-sensitive! -->
  <div>My portal content</div>
</template>

<!-- Correct: Using a valid position -->
<template portal="target.bind: renderTarget; position: 'afterbegin'">
  <div>My portal content</div>
</template>

<!-- Correct: Using binding with a valid value in the view model -->
<template portal="target.bind: renderTarget; position.bind: insertPosition">
  <div>My portal content</div>
</template>

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

@customElement({ /* ... */ })
export class MyComponent {
  renderTarget: HTMLElement; // Assume this is assigned elsewhere
  insertPosition: 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' = 'beforeend';

  // Ensure this property is always one of the valid strings
  // insertPosition = 'invalid'; // This would cause AUR0779
}

Debugging Tips

• Inspect the DOM to verify the element targeted by the portal exists.

• Check the value being passed to the position attribute in the template.

• If bound, log the value of the view model property bound to position just before the portal attempts to render or move its content.

• Refer to the documentation for Element.insertAdjacentHTML() on MDN, as the position values correspond directly to its position parameter.