ionic-framework: bug: @ionic/react: ion-slides: Failed to execute 'removeChild' on 'Node'

Bug Report

Ionic version: [cli] 5.2.2 [@ionic/react] 0.0.6

Current behavior: When trying to remove a slide to dynamically generated slides, the following uncaught exception occurs:

react-dom.development.js:9279 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Expected behavior: The slides should be updated to reflect the correct number of slides, without causing any errors.

Steps to reproduce:

Start a new React blank project:
ionic start slides blank --type=react
Use the following Home.tsx template:

import {IonContent, IonHeader, IonTitle, IonToolbar, IonSlides, IonSlide, IonButton} from '@ionic/react';
import React, {useState} from 'react';

const slideOpts = {
    initialSlide: 0,
    speed: 400
};

const Home: React.FunctionComponent = () => {

    const [slides, setSlides] = useState([
        {id: '1', text: 'Slide 1'},
        {id: '2', text: 'Slide 2'},
        {id: '3', text: 'Slide 3'},
        {id: '4', text: 'Slide 4'},
        {id: '5', text: 'Slide 5'}
    ]);

    return (
        <>
            <IonHeader>
                <IonToolbar>
                    <IonTitle>Ionic Blank</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent>

                <IonButton onClick={() => setSlides(slides.slice(1))}>
                    Remove first slide
                </IonButton>

                <IonSlides pager={true} options={slideOpts}>
                    {slides.map(slide => (<IonSlide key={slide.id}><h1>{slide.text}</h1></IonSlide>))}
                </IonSlides>
            </IonContent>
        </>
    );
};

export default Home;

Run ionic serve
Click on the “Remove first slide” button.

Ionic info:

Ionic:

   Ionic CLI: 5.2.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework: @ionic/react 0.0.6

Utility:

   cordova-res: not installed
   native-run: not installed

System:

   NodeJS: v10.16.0 (/usr/local/bin/node)
   npm: 6.10.0
   OS: macOS Mojave

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 18
Comments: 20 (2 by maintainers)

Most upvoted comments

Here is a workaround. Change the IonSlides key when your slides list changes. It’s not a universal workaround but it’s suitable for some cases:

// When the `item` slides ids don't change
<IonSlides key={item.id}>
  {item.slides.map(slide => (<IonSlide key={slide.id}><h1>{slide.text}</h1></IonSlide>))}
</IonSlides>

// When the `item` slides ids change
<IonSlides key={item.slides.map(slide => slide.id).join('_')}>
  {item.slides.map(slide => (<IonSlide key={slide.id}><h1>{slide.text}</h1></IonSlide>))}
</IonSlides>

It makes the ion-slides be destroyed and created (instead of crashing) on every slides change.

+56

Finesse on Nov 25, 2019

Any chance this ticket can get an update? This issue is actually quite crippling to ionic display functionality.

TylerBurnett on Jun 13, 2020

@brandyscarney I can also confirm this is still an issue on 5.1.1

jamesthomsondev on May 28, 2020

The IonSlide is not very well documented, but as far as I can tell from looking through the code this isn’t possible.

rasmusroy on Nov 21, 2019

Still experiencing this. Link to a CodeSandbox;

Search Miami, select the city, and wait for the weather to load. Then search Berlin, select it, and wait for the weather to load. The application will crash, and the error message pinpoints it to <IonSlide> being the culprit. As the commenter above said, this is CRIPPLING to functionality, especially something as basic as a dynamically-rendered carousel.

asharonbaltazar on Oct 30, 2020