Monaca Onsen UI Discord Chat Github Repo

DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.



  • When I change an img in an Ons.List I get the error “DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.”

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>React</title>
            <meta charset="utf-8">
            <meta name="google" content="notranslate">
    
            <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
            <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
    
            <script src="bundle.js"></script>
            <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        </head>
    
        <body>
            <div id="app"></div>
        </body>
    
        <script type="text/babel">
    
    var reactImgUrl = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K";
    
    var items = [
        {"name": "Vue",   "img": null},
        {"name": "React", "img": reactImgUrl}
    ];
    
    function Logo(props)
    {
        if (props.details.img == null)
        {
            return null;
        }
        return <img src={props.details.img}/>;
    }
    
    function LogoAndSomething(props)
    {
        return (
            <React.Fragment>
                <Logo details={props.details}/>
                {props.children}
            </React.Fragment>
        );
    }
    
    function TestList(props)
    {
        return props.items.map((details, index) =>
            <Ons.ListItem key={details.name}>
                <LogoAndSomething details={details}>
                    <span>{details.name}</span>
                </LogoAndSomething>
            </Ons.ListItem>
        );
    }
    
    function App(props)
    {
        return (
            <Ons.List>
                <TestList items={props.items}/>
            </Ons.List>
        );
    }
    
    ReactDOM.render(
        <App items={items}/>,
        document.getElementById('app')
    );
    
    setTimeout(function()
    {
        items[0].img = items[1].img;
    
        // DOMException happens during this call 
        ReactDOM.render(
            <App items={items}/>,
            document.getElementById('app')
        );
    }, 1000);
    
        </script>
    </html>
    

    The bundle.js is just browserify of

    var React = require('react');
    var ReactDOM = require('react-dom');
    var ons = require('onsenui');
    var Ons = require('react-onsenui');
    
    window.React = React;
    window.ReactDOM = ReactDOM;
    window.ons = ons;
    window.Ons = Ons;
    

    Changing from an Ons.List to a normal HTML list everything works fine.