Tessera

Appearance

T4011: Directive misuse ​

Cause ​

A template directive (if, else-if, else, each, key, bind:value, ref, @event) is used wrongly: each needs a key, else needs a preceding if, ref names a state(), and so on.

Example ​

xml
<contract>
{ "name": "Card", "role": "group", "parts": ["root"] }
</contract>
<script>
const items = state([])
</script>
<template><div class="root"><li each="item in items">x</li></div></template>

What you see ​

text
ERROR  T4011  app/components/Card.tess:7:32
  "each" needs a key, for example <li each="item in items" key="item.id">.
  Run `tessera explain T4011` for details.

Fix ​

Follow the message. A list is <li each="item in items" key="item.id">.

All errors and warnings