{# Page assets live INSIDE the content block (the dj-root): dj-navigate swaps only that region, so anything in extra_head/extra_scripts is missing when a visitor arrives by live navigation. Behaviour lives in static/js/site-pages.js. #}

DJE-051 Error Template

Duplicate keys in sibling elements

Error message

WARNING: Duplicate key in children — earlier element invisible to diff

Two or more sibling elements share the same `data-key` value. The VDOM keyed diff algorithm uses keys to match old and new elements — duplicates cause the earlier element to be invisible, leading to incorrect patches (wrong elements updated or removed).

keys template vdom

Affected versions: >=0.2.0

Solution

Recommended

Ensure unique keys within each parent

Keys must be unique among siblings. Use stable, unique identifiers like database IDs. Avoid using loop indices as keys.

Before (problematic)

{% for item in items %}
<div data-key="{{ item.category }}">  <!-- Duplicates! -->
    {{ item.name }}
</div>
{% endfor %}

After (fixed)

{% for item in items %}
<div data-key="{{ item.id }}">  <!-- Unique per item -->
    {{ item.name }}
</div>
{% endfor %}

Back to Error Reference