DOMException: Failed to execute 'replaceChild' on 'Node': The new child element contains the parent.
See original GitHub issueThis bug appears to occur when using some odd combination of higher order components.
Uncaught (in promise) DOMException: Failed to execute 'replaceChild' on 'Node': The new child element contains the parent.(…)
renderComponent @ component.js:156
setComponentProps @ component.js:45
buildComponentFromVNode @ component.js:231
idiff @ diff.js:68
innerDiffNode @ diff.js:184
idiff @ diff.js:100
diff @ diff.js:38
renderComponent @ component.js:149
rerender @ render-queue.js:21
Promise.resolve (async)f @ util.js:68
enqueueRender @ render-queue.js:12
setState @ component.js:81
(anonymous function) @ app.js:15
setTimeout (async)componentDidMount @ app.js:14
flushMounts @ diff.js:25
diff @ diff.js:40
render @ render.js:
You can generically reproduce this bug with this fork of preact-boilerplate.
I also tested the same component tree with React to be sure and it works as expected.
Issue Analytics
- State:
- Created 7 years ago
- Reactions:3
- Comments:27 (12 by maintainers)
Top Results From Across the Web
The new child element contains the parent - Stack Overflow
Part of the problem is that you are assigning both the <td> and the <img> the exact same id. You can't do that....
Read more >Failed to execute 'replaceChild' on 'Node': The new child ...
This bug appears to occur when using some odd combination of higher order components. Uncaught (in promise) DOMException: Failed to execute ' ...
Read more >Node.replaceChild() - Web APIs - MDN Web Docs
The replaceChild() method of the Node element replaces a child node within the given (parent) node. Syntax. replaceChild(newChild, oldChild)
Read more >replace a child node with a new node — DOM Level 1 Core ...
The node that was removed from the document and replaced. Throws. This method may throw a DOMException with the following code values: HIERARCHY_REQUEST_ERR....
Read more >HTML DOM Element replaceChild Method - W3Schools
// Replace the first child node with the new <li> element: list.replaceChild(element, list.childNodes[0]);. Before:.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I wish I could give a more firm time, but I’ve learned that causes more harm than good. The problem is that people expect major releases to include huge performance improvements, so I have had to spend the last few weeks trying to find some. I did, so now I’m just working through the list of breaking change that need to get into the release. I don’t have anything on this weekend, so hopefully I’ll be able to publish a beta!
@nowaalex This is because when DevTools is open, the
preact/devtools
hook is active, which transforms Pure Functional Components into classful components for tracking purposes. That circumvents the issue in a similar way to the rewrite above. I’m going to prioritize this fix for 8.0, likely cutting some of the planned breaking changes in order to get things out faster.