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

[kevinfarrugia]

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

[hardfi]

+1

[onevoone]

I have the same problem when trying to change the count of children. For example: from 10 to 6

[kevinfarrugia]

@onevoone are you able to produce a demo on Code Sandbox please? I have investigate the original case when this issue was reported and it was caused by the parent component (the one which renders <Glider />) not being unmounted/disposed correctly.

[narendra49]

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>

• 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.

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

please help me to solve this issue. @kevinfarrugia

[kevinfarrugia]

Thank you @narendra49 . I was able to replicate the issue when using dynamic data.

https://codesandbox.io/s/react-glider-demo-forked-iq493c?file=/src/App.js

Will be looking into it.

[kevinfarrugia]

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>