Closed
Description
Alpine version: 2.4.1
I'm getting an error when using x-for on a template tag to generate SVG elements. With the following HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rectangle Editor</title>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@2.4.1/dist/alpine.js"></script>
</head>
<body>
<div x-data="rectangleEditor()">
<svg width="1024" height="1024">
<!-- Error -->
<template x-for="rectangle in rectangles" :key="rectangle">
<rect :x="rectangle.x" :y="rectangle.y" :width="rectangle.width" :height="rectangle.height" />
</template>
</svg>
<!-- No error -->
<template x-for="rectangle in rectangles" :key="rectangle">
<div :x="rectangle.x" :y="rectangle.y" :width="rectangle.width" :height="rectangle.height" />
</template>
</div>
<script>
function rectangleEditor() {
return {
rectangles: [
{ x: 20, y: 40, width: 200, height: 400 },
{ x: 60, y: 100, width: 500, height: 500 },
{ x: 200, y: 40, width: 100, height: 400 },
{ x: 300, y: 40, width: 100, height: 400 },
],
}
};
</script>
</body>
</html>I don't get such an error when using x-for outside a svg element. But as soon as I add elements in a svg element using x-for (even standard HTML elements such as div), I get the following stack trace:
Chromium 81:
alpine.js:76 Uncaught TypeError: Cannot read property 'childElementCount' of undefined
at warnIfMalformedTemplate (alpine.js:76)
at handleForDirective (alpine.js:438)
at alpine.js:1570
at Array.forEach (<anonymous>)
at Component.resolveBoundAttributes (alpine.js:1530)
at Component.initializeElement (alpine.js:1446)
at alpine.js:1430
at alpine.js:1420
at walk (alpine.js:84)
at walk (alpine.js:88)
Firefox 78:
Uncaught TypeError: el.content is undefined
alpinejs 2.4.1/dist/alpine.js:76
alpinejs 2.4.1/dist/alpine.js:438
alpinejs 2.4.1/dist/alpine.js:1570
alpinejs 2.4.1/dist/alpine.js:1530
alpinejs 2.4.1/dist/alpine.js:1446
alpinejs 2.4.1/dist/alpine.js:1430
alpinejs 2.4.1/dist/alpine.js:1420
alpinejs 2.4.1/dist/alpine.js:84
alpinejs 2.4.1/dist/alpine.js:88
alpinejs 2.4.1/dist/alpine.js:88
alpinejs 2.4.1/dist/alpine.js:1408
alpinejs 2.4.1/dist/alpine.js:1425
alpinejs 2.4.1/dist/alpine.js:1355
alpinejs 2.4.1/dist/alpine.js:1735
alpinejs 2.4.1/dist/alpine.js:1678
alpinejs 2.4.1/dist/alpine.js:1694
alpinejs 2.4.1/dist/alpine.js:1693
alpinejs 2.4.1/dist/alpine.js:1677
If this isn't supported, then this should be documented in the README. (I'm willing to open a PR for that if this is the case.)