ReactJS: Failed to execute 'removeChild' on 'Node' when updating component

Question

I keep getting this error when attempting to update a component with new data fetched from a server.

Description:

• Portfolio.js

  I have an app that has a portfolio where the projects of the site are shown. When you click an item in portfolio, you are redirected (with react-router) to the individual project.

• Project.js

  The project component uses the fetch api to retrieve data from a server. Which works perfectly because when the url specifies the project to be show like: /portfolio/project/:id, and based on the id received the data is fetched and displayed correctly.

• The data retrieved

  What is retrieved trough fetch api is just the result of a AJAX POST request to a server with the only parameter of the project id, which only returns the info of the project. (name, description, images, and other ones not much important)

The issue:

As far I've analyzed the application to see when this error is triggered, I found that this warning comes out when the amount of images for the new project loaded is smaller than the amount of images of the project already rendered.

An example:

We are inside a project. The url is portfolio/project/1 and the server data returned that this project has 5 images. They are loaded and you can view the project correctly.

Now, we use the menu to react-router-redirect to portfolio/project/2 and the server returned data with 7 images. They are loaded and the project data as well to view the project.

So, let say that we choose the option in the menu to view the project portfolio/project/3 which has 3 images, and then the warning comes up.

Browser: Console log:

The code:

Since the error says the problem is inside Project.js, I am only adding this code so the question doesn't look overloaded and full of weird code.

Project.js

import React,{Component} from 'react'
import Footer from '../Footer/Footer'
import Header from '../Header'
import SubNav from '../SubNav'
import Details from './Details'
import {Link} from 'react-router-dom'
import {Configurations} from '../AppConfig'

class Project extends Component{

state = {
            projectInfo: null,
            reloadHandlerActive: false,
            projectID : this.props.match.params.id,
            projectName: "",
            topProjectInfo: [],
            images: []
}

createImages = (project) =>{
  let Images = Object.values(project.images),
      ImagesURI = Images.map((img, index)=>{
        if( img.includes('Desarrollos.jpg') || img.includes('Home.jpg') || img.includes('H.jpg') ){
          return null
        }
      return project.path+img
      })
  ImagesURI = ImagesURI.filter(function (e) { //Clear null values
    return e != null;
  })
  return ImagesURI
}

    reloadHandler = (id) =>{
      const {createImages} = this
      fetch(Configurations.API.projectInfo(id))
        .then((result)=>{return result.json() })
        .then((project)=>{
          if(project === "error"){
            alert("Error")
          }else{
              this.setState({
                projectInfo: project,
                images: createImages(project)
              },function(){
                document.getElementsByClassName("nav-button")[0].click()
              })
          }
        })
    }

    componentWillMount(){
      const {createImages} = this
      fetch(Configurations.API.projectInfo(this.state.projectID))
        .then((result)=>{return result.json() })
        .then((project)=>{
          if(project === "error"){
            alert("Error")
          }else{
            this.setState({
              projectInfo: project,
              images: createImages(project)
            },function(){
              window.initDogma()
            })
          }
        })
    }

    componentDidMount(){
      window.onload = window.initShit()
    }

    render(){
      const {projectInfo,images} = this.state
      console.log(projectInfo)

      if(!projectInfo){
        return(<h1>. . .</h1>)
      }
      return(
          <div >
              <Header />
              <SubNav reloadHandler={this.reloadHandler} />
              <div className="content full-height no-padding">

              <div className="fixed-info-container">
              <Link to="/portfolio"><button className="goBackBtn">Desarrollos</button></Link>
                <h3>{projectInfo.project.project}</h3>
                  <div className="separator" />
                  <div className="clearfix" />
                  <p>
                    {projectInfo.project.address}
                  </p>
                  <span className="project-status">{projectInfo.project.status}</span>
                  <h4>Características</h4>
                  <Details price={projectInfo.project.price} features={projectInfo.project.features} />
                  <Link className=" btn anim-button   trans-btn   transition  fl-l" to={"/contact/?project="+projectInfo.id}> 
                    <span>Informes</span>
                    <i className="fa fa-eye" />
                  </Link>
                  </div>


              {/*  fixed-info-container end*/}
              {/*  resize-carousel-holder*/}
              <div className="resize-carousel-holder vis-info gallery-horizontal-holder">
                {/*  gallery_horizontal*/}
                <div
                  id="gallery_horizontal"
                  className="gallery_horizontal owl_carousel"
                >
                  {
                    images.map((img,index)=>{
                      return (
                      <div key={index}className="horizontal_item">
                        <div className="zoomimage">
                          <img src={img} className="intense" alt="" />
                          <i className="fa fa-expand" />
                        </div>
                        <img src={img} alt="" />
                        <div className="show-info">
                          <span>Info</span>
                          <div className="tooltip-info">
                            <h5>Imagen de muestra</h5>
                            <p>
                              Imagen del desarrollo
                            </p>
                          </div>
                        </div>
                      </div>
                      )
                    })
                  }
                </div>
                {/*  resize-carousel-holder*/}
                {/*  navigation */}
                <div className="customNavigation">
                  <a href="/" className="prev-slide transition">
                    <i className="fa fa-angle-left" />
                  </a>
                  <a href="/" className="next-slide transition">
                    <i className="fa fa-angle-right" />
                  </a>
                </div>
                {/*  navigation end*/}
              </div>
              {/*  gallery_horizontal end*/}
            </div>
            <Footer />
            </div>
        )
    }
}
export default Project

I'm currently looking how to fix this, but if someone could give me an advice or the origin of the issue would be really helpful.

Answer 1

By the time your question was posted, there was an issue open at reactjs github repo talking about something similar. It is now solved, but you may want to read the article.