Failed to execute 'removeChild' on 'Node'

[tomzmtl]

Hi, I just setup a PoC using this library and all went OK following the setup guide, the carousel works perfectly and the implementation was really easy.

I''m however getting an error when transitioning back-and-forth between the view where the carousel lives and other ones:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

I am using a mix of angularJS + uiRouter and React right now, but I'm not sure it has to do with the stack itself. I wonder if I need to make something happen on componentWillUnmount to make sure all references to DOM elements used by flickity are purged (flickity.destroy()?).

From the stack trace the error seems to stem from FlickityComponent.

[yaodingyd]

Can you share your component?

[JPStrydom]

I'm experiencing the same issue intermittently. I'm have the following relevant dependencies:

...
"react": "16.4.2",
"react-dom": "16.4.2",
"react-router-dom": "4.3.1",
"react-flickity-component": "3.0.3",
...

my render method looks as follows:

render() {
    const { cast } = this.props.details;
    
    const flickityOptions = {
        cellAlign: 'left',
        draggable: true,
        groupCells: true,
        freeScroll: true,
        contain: true,
        pageDots: false,
        percentPosition: false,
        adaptiveHeight: true,
        arrowShape: {
            x0: 10,
            x1: 60, y1: 50,
            x2: 65, y2: 45,
            x3: 20
        }
    };

    return (
        <div className="cast-wrapper">
            <h2>{'Starring'}</h2>
            <div className="cast-list-wrapper">
                <Flickity options={flickityOptions}>
                    {renderCastList(cast)}
                </Flickity>
            </div>
        </div>
     );
   
    function renderCastList(cast) {
        return _.map(cast, (item, index) => (
            <div key={index} className="cast-item">
                <img draggable={false} src={item.poster} alt={item.name} />
                <h4>{item.name}</h4>
            </div>
        ));
    }
 }

I've tried setting reloadOnUpdate to true, but it didn't help.

Any advice?

[GChin12]

Same issue.

[yaodingyd]

@JPStrydom @GChin12 Could you provide a reduced test case in code sandbox? I feel like your issue has something to do routing, but I cannot reproduce this. You can modify this one link to suit your case.

[tomzmtl]

Just FYI, I reverted back to a vanilla Flickity setup and my issue is fixed.
I'll retry to use the react wrapper later, when I'll have a more standard stack to work with (I currently run an AngularJS/redux/uiRouter app with custom bindings for react to allow for complete migration.

[JPStrydom]

@yaodingyd Why do you suspect it's a routing issue? When I remove the Flickity component, the issue disappears completely.

If I have some time I'll try to reproduce the issue in the sandbox.

[yaodingyd]

@JPStrydom I'm saying it could be the conditional rendering resulted from routing. Again, I'm just speculating. A reduced test case would really be helpful.

[JPStrydom]

Cool, I'll have a look in the morning. But say it is the routing, how would we approach the issue?

[nicolasmn]

It's not. We are currently facing the same problem with a pretty bare-bones implementation (no dependencies beside react, react-dom and react-flickity-component.

It seems like it has something to do with the optimization.runtimeChunk option in Webpack 4, setting it to false makes the error disappear.

[oleksandrkyselov]

Same here, any solutions?

[JPStrydom]

I ended up using Nuka Carousel - it's not as flexible, but it does the job.

[oleksandrkyselov]

Thanks for providing an alternative, even better with MIT license!

Have a great day!

[yaodingyd]

This thread has no useful information for actual debugging work of said error. Closing for now.

[oleksandrkyselov]

When component needs to re-render, this happens.

[yaodingyd]

Issue is tracked at #49

[yaodingyd]

Issue should be fixed with release of 3.1.0

[oleksandrkyselov]

Thank you very much @yaodingyd !

[kbadova]

Since no activity is present since 2018, I will share the way I managed to fix this error in my case.

Imagine we have the following situation:

# /pages/channelId.js

import RecentVideoCarousel from './RecentVideoCarousel'

const Videos = ({recentVideos}) => {
 
 // const recentVideos = [
 //   {id: <uuid1>, preview: <some_src1>},
 //   {id: <uuid2>, preview: <some_src2>},
 //   {id: <uuid3>, preview: <some_src3>}
 // ]

  return (
    <RecentVideoCarousel videos={recentVideos} />
  )
}

# pages/RecentVideoCarousel.js

import Flickity from 'flickity';
import React, { useRef, useEffect } from "react";

const RecentVideoCarousel = ({videos}) => {

  const carouselRef = useRef();

   useEffect(() => {
     if (!videos) return;
      const fl = new Flickity(carouselRef.current, {
        wrapAround: true,
        pageDots: false,
        prevNextButtons: false
      });

    window.fl = fl;

    return () => window.fl.destroy();
  }, [videos]);

  return(
    <div className="carousel" id="carousel" ref={carouselRef}>
      {recentVideos.map(video => (
            <div key={video.id} video={video} />
          ))}
    </div>
  )
}

Switching over different videos pages, recentVideos length will be changed and the error The Node to be removed is not a child of this node will appear. The reason behind is rerendering carousel children after the carousel ref is updated.

So the way I fixed this was just adding a key to the RecentVideoCarousel so that the whole carousel logic would be reloaded when recentVideos are changed:

# /pages/channelId.js

import RecentVideoCarousel from './RecentVideoCarousel'

const Videos = ({recentVideos}) => {
 
 // const recentVideos = [
 //   {id: <uuid1>, preview: <some_src1>},
 //   {id: <uuid2>, preview: <some_src2>},
 //   {id: <uuid3>, preview: <some_src3>}
 // ]

  return (
    <RecentVideoCarousel videos={recentVideos} key={key={`${recentVideos.map((v) => v.id)}`}}/>
  )
}

[kunaldongre24]

I already have added the key but nothing seems to chage, I am still having the error.

[edenizk]

I already have added the key but nothing seems to chage, I am still having the error.

Be sure that your key for slider/carousel is changing correctly depending on the value of slides it includes.
I have used JSON.stringify for the entire object of slides :)