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
Check
positionValue: Review the template where theportalattribute is used and ensure the value bound to thepositionattribute is one of the four valid strings:'beforebegin','afterbegin','beforeend', or'afterend'.Verify Binding: If the
positionis dynamically bound (e.g.,position.bind="myPosition"), ensure that the view model property (myPositionin this case) always resolves to one of the valid strings.Default Behavior: If you want the default behavior (usually
'beforeend'), you can often omit thepositionattribute 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
positionattribute in the template.If bound, log the value of the view model property bound to
positionjust before the portal attempts to render or move its content.Refer to the documentation for
Element.insertAdjacentHTML()on MDN, as thepositionvalues correspond directly to itspositionparameter.
Last updated
Was this helpful?