AUR0720

Spreading syntax "...xxx" is reserved. Encountered "...yyyy"

Error message

Spreading syntax "...xxx" is reserved. Encountered "...{{0}}"

Parameters

1. target: The invalid spread target encountered (e.g., ...my-data).

Error explanation

This error occurs during template compilation when an attribute uses the spread syntax (...) but the target specified after the dots is not a recognized reserved keyword. Aurelia reserves the spread syntax for specific purposes:

• ...$attrs: Used within a component's template to pass through all attributes captured from the component's usage to an inner element.

• ...$bindables: Used on a custom element to spread properties from an object onto the element's bindable properties.

• ...$element: Used on a custom element to spread properties from an object directly onto the element instance (use with caution).

Using the spread syntax with any other target (e.g., ...my-object, ...some-prop) is not allowed.

Common causes

• Attempting to use the spread syntax with a custom target name.

• A typo in one of the reserved spread targets (e.g., ...$attr instead of ...$attrs).

How to fix

• Ensure you are using one of the valid reserved spread targets: ...$attrs, ...$bindables, or ...$element.

• Correct any typos in the spread target name.

• If you intended to bind multiple properties from an object, use ...$bindables on a custom element or bind properties individually.

Example of Incorrect Usage:

<!-- Error: "...my-data" is not a valid spread target -->
<my-component ...my-data.bind="someObject"></my-component>

<!-- Error: Typo in reserved target -->
<template>
  <div ...$attr></div> <!-- Should be ...$attrs -->
</template>

Example of Correct Usage:

<!-- Spreading captured attributes -->
<template>
  <div ...$attrs>
    <slot></slot>
  </div>
</template>

<!-- Spreading onto bindables -->
<my-element ...$bindables.bind="viewModelProperties"></my-element>

<!-- Spreading onto element instance (use carefully) -->
<my-element ...$element.bind="objectWithMatchingProperties"></my-element>