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.