feat: Adds descriptive warning for undefined x-for key and updates tests. (#3498)

package-lock.json

@@ -7046,7 +7046,7 @@
             }
         },
         "packages/alpinejs": {
-            "version": "3.11.1",
+            "version": "3.12.0",
             "license": "MIT",
             "dependencies": {
                 "@vue/reactivity": "~3.1.1"
@@ -7054,7 +7054,7 @@
         },
         "packages/collapse": {
             "name": "@alpinejs/collapse",
-            "version": "3.11.1",
+            "version": "3.12.0",
             "license": "MIT"
         },
         "packages/csp": {
@@ -7067,12 +7067,12 @@
         },
         "packages/docs": {
             "name": "@alpinejs/docs",
-            "version": "3.11.1-revision.1",
+            "version": "3.12.0-revision.1",
             "license": "MIT"
         },
         "packages/focus": {
             "name": "@alpinejs/focus",
-            "version": "3.11.1",
+            "version": "3.12.0",
             "license": "MIT",
             "dependencies": {
                 "focus-trap": "^6.6.1"
@@ -7088,17 +7088,17 @@
         },
         "packages/intersect": {
             "name": "@alpinejs/intersect",
-            "version": "3.11.1",
+            "version": "3.12.0",
             "license": "MIT"
         },
         "packages/mask": {
             "name": "@alpinejs/mask",
-            "version": "3.11.1",
+            "version": "3.12.0",
             "license": "MIT"
         },
         "packages/morph": {
             "name": "@alpinejs/morph",
-            "version": "3.11.1",
+            "version": "3.12.0",
             "license": "MIT"
         },
         "packages/navigate": {
@@ -7108,12 +7108,12 @@
         },
         "packages/persist": {
             "name": "@alpinejs/persist",
-            "version": "3.11.1",
+            "version": "3.12.0",
             "license": "MIT"
         },
         "packages/ui": {
             "name": "@alpinejs/ui",
-            "version": "3.10.5-beta.8",
+            "version": "3.12.0-beta.0",
             "license": "MIT"
         }
     },

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)

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
+)