AUR0811

Error Message

AUR0811: Invalid portal strict target query, empty query.

Description

This error occurs when using the portal custom attribute in strict mode (e.g., portal="strict: <selector>" or portal.strict="<selector>") and the provided CSS selector used to find the target element is an empty string or contains only whitespace.

Cause

The direct cause is providing an empty or whitespace-only query string to the portal attribute when using the strict: prefix or the .strict binding mode. The strict mode requires a valid CSS selector to precisely identify the target element where the portal content should be rendered.

Example causes:

• portal="strict:"

• portal="strict: "

• portal.strict=""

• portal.strict.bind="someProperty" where someProperty evaluates to an empty string.

Solution

Ensure that when using the strict mode for the portal attribute, you provide a valid, non-empty CSS selector that uniquely identifies the target element in the DOM.

1. Provide a Selector: Add a valid CSS selector after strict:.

2. Check Bound Property: If binding the selector (e.g., portal.strict.bind="targetSelector"), ensure the view model property (targetSelector in this case) holds a valid, non-empty CSS selector string.

3. Remove Strict Mode: If strict targeting isn't required, remove the strict: prefix or use a different binding mode (portal="target:<selector>" or portal.bind="targetElement").

Example

<!-- Incorrect: Empty query in strict mode -->
<div portal="strict:">Portal Content</div>

<!-- Incorrect: Bound property is empty -->
<template>
  <div portal.strict.bind="emptySelector">Portal Content</div>
</template>

<!-- Correct: Valid selector provided -->
<div portal="strict: #my-portal-target">Portal Content</div>

<!-- Correct: Bound property has a valid selector -->
<template>
  <div portal.strict.bind="portalTargetSelector">Portal Content</div>
</template>

<!-- Target element elsewhere in the DOM -->
<div id="my-portal-target"></div>

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

@customElement({ /* ... */ })
export class MyComponent {
  // Incorrect setup for the binding example above
  emptySelector = '';

  // Correct setup for the binding example above
  portalTargetSelector = '#my-portal-target';
}

Debugging Tips

• Inspect the value of the portal attribute in the DOM where the error occurs.

• If the selector is bound, check the value of the corresponding view model property at runtime using console.log or debugger tools.

• Ensure the selector provided is a valid CSS selector recognized by document.querySelector.

• Verify that the strict: prefix is correctly formatted if used.