Add warning for duplicate x-for keys

alpinejs · Jan 24, 2024 · f6e87ce · f6e87ce
1 parent 2a9d9d8
commit f6e87ce
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/packages/alpinejs/src/directives/x-for.js b/packages/alpinejs/src/directives/x-for.js
@@ -60,15 +60,23 @@ function loop(el, iteratorNames, evaluateItems, evaluateKey) {
             items = Object.entries(items).map(([key, value]) => {
                 let scope = getIterationScopeVariables(iteratorNames, value, key, items)
 
-                evaluateKey(value => keys.push(value), { scope: { index: key, ...scope} })
+                evaluateKey(value => {
+                    if (keys.includes(value)) warn('Duplicate key on x-for', el)
+
+                    keys.push(value)
+                }, { scope: { index: key, ...scope} })
 
                 scopes.push(scope)
             })
         } else {
             for (let i = 0; i < items.length; i++) {
                 let scope = getIterationScopeVariables(iteratorNames, items[i], i, items)
 
-                evaluateKey(value => keys.push(value), { scope: { index: i, ...scope} })
+                evaluateKey(value => {
+                    if (keys.includes(value)) warn('Duplicate key on x-for', el)
+
+                    keys.push(value)
+                }, { scope: { index: i, ...scope} })
 
                 scopes.push(scope)
             }
@@ -158,7 +166,7 @@ function loop(el, iteratorNames, evaluateItems, evaluateKey) {
             let marker = document.createElement('div')
 
             mutateDom(() => {
-                if (! elForSpot) warn(`x-for ":key" is undefined or invalid`, templateEl)
+                if (! elForSpot) warn(`x-for ":key" is undefined or invalid`, templateEl, keyForSpot, lookup)
 
                 elForSpot.after(marker)
                 elInSpot.after(elForSpot)