CODEWITHSUNDEEP
javascriptreactjs
CCCC
CCCC

Reputation: 6469

React - Failed to execute 'removeChild' on 'Node'

When entering the website, you will be in Home component with path /

But if you switch page to About/Dashboard, below error occurs

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

How to fix it?

example.js

import React, { useEffect } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import ScrollMagic from "scrollmagic";

export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

        <hr />
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  useEffect(() => {
    const scrollController = new ScrollMagic.Controller({
      globalSceneOptions: { triggerHook: "onCenter" }
    });
    const scrollScene = new ScrollMagic.Scene({
      triggerElement: "#pin",
      duration: 2000,
      offset: -50
    })
      .setPin("#pin")
      .on("progress", function (e) {
        console.log(e.progress);
      });
    scrollScene.addTo(scrollController);
  }, []);
  return (
    <div id="pin">
      <h2>Home</h2>
      <div style={{ height: "1700px" }}>Another Stuff</div>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <div style={{ height: "1700px" }}>Another Stuff in Dashboard</div>
    </div>
  );
}

Codesandbox
https://codesandbox.io/s/react-router-basic-forked-q9iwm?file=/example.js

Upvotes: 1

Views: 12167

Answers (3)

Oo-_-oO
Oo-_-oO

Reputation: 434

I dont know what you are trying to achieve with ScrollMagic, but the following block definitely works.

<React.Fragment id="pin">
  <h2>Home</h2>
  <div style={{ height: "1700px" }}>Another Stuff</div>
</React.Fragment>

Sandbox Link

Just to add, when I debugged, it looked like that when you are using setPin function, it is causing some issues.

Upvotes: 1

Sangeet Agarwal
Sangeet Agarwal

Reputation: 1825

It seems the issue is with the useEffect code in your home component. I commented that out and all seems well. See codesandbox https://codesandbox.io/s/react-router-basic-forked-7oysy?file=/example.js

Upvotes: 0

Anku Singh
Anku Singh

Reputation: 954

The problem is in About/Dashboard function can you replace your div tag with <React.Fragment> and try. Fragments let you group a list of children without adding extra nodes to the DOM.

function About() {
   return (
     <React.Fragment>
      <h2>About</h2>
     </React.Fragment>
  );
}

Upvotes: 0

Related Questions