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.

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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.