AUR0703

Template compilation error: template controller "yyyy" is invalid on element surrogate.

Error message

Template compilation error: template controller "{{0}}" is invalid on element surrogate.

Parameters

1. attribute: The name of the template controller attribute found on the surrogate <template> tag.

Error explanation

This error occurs when the template compiler finds a template controller attribute (e.g., if, repeat.for, with, au-compose, portal) directly on the root <template> tag of a custom element definition. Template controllers are designed to control the rendering of the elements within a template, not the template itself.

Common causes

• Adding attributes like if.bind="condition", repeat.for="item of items", with.bind="object", etc., to the main <template> tag of a component's HTML file.

How to fix

• Remove the template controller attribute from the root <template> tag.

• Apply template controllers to elements inside the <template> tag if you want to conditionally render or repeat the content of the component.

• If you want to conditionally render the entire component, apply the template controller where the component is used, not within its definition.

Example of Incorrect Usage:

<!-- my-component.html -->
<!-- Error: "if.bind" is invalid on the root template -->
<template if.bind="someCondition">
  <div>Hello</div>
</template>

<!-- Error: "repeat.for" is invalid on the root template -->
<template repeat.for="item of items">
  <div>${item}</div>
</template>

Example of Correct Usage:

<!-- my-component.html -->
<template>
  <!-- Apply template controllers to elements inside -->
  <div if.bind="someCondition">Hello</div>
  <div repeat.for="item of items">${item}</div>
</template>

<!-- Usage in another component -->
<!-- Apply template controller where the component is used -->
<my-component if.bind="shouldShowComponent"></my-component>