NotFoundError: Failed to execute 'removeChild' on 'Node' on React with Flickity

Question

I'm building a react application, and on my HomePage, I have the component 'CategoriesList'.

When I'm on the HomePage, the 'Categories List' works well, but when I navigated to ProductDetails page with react-router-dom, I found this error:

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

'CategoriesList' uses Flickty. I tried to remove Flickity, and... Works well. But I need to use Flickity.

Can anyone help me?

CategoryList Component:

const CategoryList = ({list, popupOpen, refreshProductList}) => {

    return (
        <Container>
            <Slider
                options={{
                    cellAlign: 'center',
                    draggable: true,
                    groupCells: true,
                    contain: false,
                    pageDots: false,
                  }}

                  style={ popupOpen ? ({opacity: 0.05})  : null}
            >
                {list.map((category, index) => ( 
                        <Category key={index}>{category}</Category>
                ))}

            </Slider>
        </Container>
    );
}

Flickty Slider Component:

import Flickity from 'flickity';
import 'flickity/dist/flickity.min.css';

export default class Slider extends Component {
    constructor(props) {
        super(props);

        this.state = {
          flickityReady: false,
        };

        this.refreshFlickity = this.refreshFlickity.bind(this);
      }

      componentDidMount() {
        this.flickity = new Flickity(this.flickityNode, this.props.options || {});

        this.setState({
          flickityReady: true,
        });
      }

      refreshFlickity() {
        this.flickity.reloadCells();
        this.flickity.resize();
        this.flickity.updateDraggable();
      }

      componentWillUnmount() {
        this.flickity.destroy();
      }

      componentDidUpdate(prevProps, prevState) {
        const flickityDidBecomeActive = !prevState.flickityReady && this.state.flickityReady;
        const childrenDidChange = prevProps.children.length !== this.props.children.length;

        if (flickityDidBecomeActive || childrenDidChange) {
          this.refreshFlickity();
        }
      }

      renderPortal() {
        if (!this.flickityNode) {
          return null;
        }

        const mountNode = this.flickityNode.querySelector('.flickity-slider');

        if (mountNode) {
          return ReactDOM.createPortal(this.props.children, mountNode);
        }
      }

      render() {
        return [
          <div style={this.props.style} className={'test'} key="flickityBase" ref={node => (this.flickityNode = node)} />,
          this.renderPortal(),
        ].filter(Boolean);
      }
}

Answer 1

If you want to use Flickity along with React instead of creating your own component, I highly recommend using react-flickity-component. It's also easy to use:

Tip: if you use wrapAround option in Flickity set disableImagesLoaded prop ture (default is false).

import Flickity from 'react-flickity-component'

const flickityOptions = {
    autoPlay: 4000,
    wrapAround: true
}

function Carousel() {
  return (
    <Flickity
      disableImagesLoaded
      options={flickityOptions} // Takes flickity options {}
    >
      <img src="/images/placeholder.png"/>
      <img src="/images/placeholder.png"/>
      <img src="/images/placeholder.png"/>
    </Flickity>
  )
}