Skip to content

Error when using x-for to generate SVG elements #637

Closed
@Calinou

Description

@Calinou

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentation

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions