feat: Adds descriptive warning for undefined x-for key and updates te…

…sts. (#3498)
alpinejs · May 10, 2023 · 9ad43f1 · 9ad43f1
1 parent 3a75b62
commit 9ad43f1
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/alpinejs/src/directives/x-for.js b/packages/alpinejs/src/directives/x-for.js
@@ -158,6 +158,9 @@ function loop(el, iteratorNames, evaluateItems, evaluateKey) {
             let marker = document.createElement('div')
 
             mutateDom(() => {
+                if (!elForSpot) {
+                    throw new Error("AlpineJS x-for Error: ':key' is undefined or invalid. Please ensure you're providing a valid key attribute.");
+                }
                 elForSpot.after(marker)
                 elInSpot.after(elForSpot)
                 elForSpot._x_currentIfEl && elForSpot.after(elForSpot._x_currentIfEl)

diff --git a/tests/cypress/integration/directives/x-for.spec.js b/tests/cypress/integration/directives/x-for.spec.js
@@ -559,3 +559,29 @@ test('renders children using directives injected by x-html correctly',
         get('p:nth-of-type(2) span').should(haveText('bar'))
     }
 )
+
+test('x-for throws descriptive error when key is undefined',
+    html`
+        <div x-data="{ items: [
+            {
+                id: 1,
+                name: 'foo',
+            },
+            {
+                id: 2,
+                name: 'bar',
+            },
+            {
+                id: 3,
+                name: 'baz',
+            },
+        ]}">
+            <template x-for="item in items" :key="item.doesntExist">
+                <span x-text="i"></span>
+            </template>
+        </div>
+    `,
+    ({ get }) => {
+    },
+    true
+)