AUR0718

Spreading template controller "yyyy" is not supported.

Error message

Spreading template controller "{{0}}" is not supported.

Parameters

1. attributeName: The name of the template controller attribute being spread.

Error explanation

This error occurs during the compilation of attribute spreading (using the ...$attrs syntax or programmatically via IResourceResolver.compileSpread). The compiler detected an attempt to spread an attribute that is also a template controller (e.g., if, repeat.for, with, au-compose, portal).

Spreading allows passing through attributes and bindings to an underlying element or component, but template controllers fundamentally alter the rendering structure and cannot be meaningfully spread onto another element.

Common causes

• Capturing attributes using ...$attrs on a component and passing them to an inner element where one of the captured attributes is a template controller.

How to fix

• Avoid spreading template controllers. Template controllers should be applied directly to the elements they are intended to control.

• If you need conditional logic or repetition based on the context where attributes are spread, consider passing specific data properties instead of spreading the template controller attribute itself. Refactor the receiving component to use the passed data with its own template controllers.

Example of Incorrect Usage:

<!-- my-wrapper.html -->
<template>
  <!-- Capturing all attributes, including potential template controllers -->
  <div ...$attrs>
    <slot></slot>
  </div>
</template>

<!-- usage.html -->
<import from="./my-wrapper"></import>

<!-- Error occurs during spread compilation because 'if.bind' is a template controller -->
<my-wrapper if.bind="condition" class="extra-styling"></my-wrapper>

Example of Correct Usage (Passing Data Instead):

// my-wrapper.ts
import { customElement, bindable } from 'aurelia';

@customElement({ name: 'my-wrapper', template: `...`})
export class MyWrapper {
  // Define a specific bindable for the condition
  @bindable showContent: boolean = true;
}

<!-- my-wrapper.html -->
<template>
  <!-- Use the specific property with an internal template controller -->
  <div if.bind="showContent" class="original-styling">
    <slot></slot>
  </div>
</template>

<!-- usage.html -->
<import from="./my-wrapper"></import>

<!-- Pass the condition as data, spread other attributes if needed -->
<my-wrapper show-content.bind="condition" class="extra-styling"></my-wrapper>