question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Uncaught DOMException: Failed to execute 'removeChild' on 'Node'

See original GitHub issue

When 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:closed
  • Created a year ago
  • Reactions:4
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
kevinfarrugiacommented, Oct 7, 2022

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 setting skipTrack 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

          <Glider slidesToShow={1} scrollLock hasDots draggable skipTrack>
            <div>
              {data.map((n) => (
                <div key={nanoid()} className="slide">
                  {n}
                </div>
              ))}
            </div>
          </Glider>
1reaction
narendra49commented, Oct 7, 2022

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>

Screenshot 2022-10-07 at 11 53 38 AM
  • If we use the simple gilder component without using map function with static data then Its working fine .
  • If we use map function then Its shows me this issue.
Screenshot 2022-10-07 at 12 01 28 PM

Versions: react:17.0.2 react-dom: 17.0.2 react-glider: 3.1.0

please help me to solve this issue. @kevinfarrugia

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found