Warn when x-for template has multiple root elements

calebporzio · NightFurySL2001 · claude · calebporzio · commit c34ea5e3594e · 2026-02-18T11:47:18.000-05:00
x-for silently discards all but the first child element of a template.
This adds a console.warn so users know what's happening instead of
debugging invisible behavior.

Co-Authored-By: NFSL2001 &lt;NightFurySL2001@users.noreply.github.com&gt;
Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/packages/alpinejs/src/directives/x-for.js b/packages/alpinejs/src/directives/x-for.js
@@ -111,6 +111,9 @@ function loop(templateEl, iteratorNames, evaluateItems, evaluateKey) {
                     return
                 }
 
+                if (templateEl.content.children.length > 1)
+                    warn('x-for templates require a single root element, additional elements will be ignored.', templateEl)
+
                 let clone = document.importNode(templateEl.content, true).firstElementChild
                 let reactiveScope = reactive(scope)
                 addScopeToNode(clone, reactiveScope, templateEl)

Original file line number	Diff line number	Diff line change
`@@ -111,6 +111,9 @@ function loop(templateEl, iteratorNames, evaluateItems, evaluateKey) {`
`111`	`111`	`return`
`112`	`112`	`}`
`113`	`113`
	`114`	`+ if (templateEl.content.children.length > 1)`
	`115`	`+ warn('x-for templates require a single root element, additional elements will be ignored.', templateEl)`
	`116`	`+`
`114`	`117`	`let clone = document.importNode(templateEl.content, true).firstElementChild`
`115`	`118`	`let reactiveScope = reactive(scope)`
`116`	`119`	`addScopeToNode(clone, reactiveScope, templateEl)`