Uncaught DOMException: Failed to execute 'removeChild' on 'Node'
See original GitHub issueWhen navigating from one route to another using a client-side router (ex: react-router
), I am receiving a console error
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
This usually occurs when the page has a glider and the user navigates away from this page. Then when returning to this page (using back button) it crashes.
Details
- Version: 3.1.0
- React: 17.0.2
- Browser: Chrome v102
Issue Analytics
- State:
- Created a year ago
- Reactions:4
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Failed to execute removeChild on Node - Stack Overflow
Your myCoolDiv element isn't a child of the player container. It's a child of the div you created as a wrapper for it...
Read more >Failed to execute 'removeChild' on 'Node'" when using React ...
It happened in my project by having t() function. The problem was using Google Translate from Chrome. Maybe it is a good solution...
Read more >Uncaught DOMException: Failed to execute 'removeChild' on ...
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. This error does...
Read more >DOMException: Failed to execute 'removeChild' on 'Node'
Uncaught (in promise) DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at...
Read more >DOMException: Failed to execute 'removeChild' on 'Node'
DOMException : Failed to execute 'removeChild' on 'Node': When I added selecct2 in JS hooks ... Hello guys, I have three problems: ......
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 FreeTop 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
Top GitHub Comments
This has been fixed in 4.0.2. If you are unable to update to the latest version (dependent on
react: ^18.0.0
), you can workaround this issue by settingskipTrack
and adding a<div>
as the first and only child of<Glider>
.Workaround: https://codesandbox.io/s/react-glider-demo-forked-iq493c?file=/src/App.js
Example
I got the same issue when I logout the and login again in website and fetch the data of course card then I got the issue.
import Glider from 'react-glider'; <Glider draggable hasArrows={!isMobile} hasDots iconLeft={ <ControlComponent isDisabled={false}> <ChevronLeft /> </ControlComponent> } iconRight={ <ControlComponent isDisabled={false}> <ChevronRight /> </ControlComponent> } slidesToShow={2} slidesToScroll={1} responsive={baseResposiveObj} > {results?.map((item: any, index: number) => ( <CourseCardV2 key={item?.code} id={item} sectionHeading={heading} item={{ ...item, position: index + 1, sectionType }} /> ))} </Glider>
Versions: react:17.0.2 react-dom: 17.0.2 react-glider: 3.1.0
please help me to solve this issue. @kevinfarrugia