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.

djfooks

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.