React: [React v15.0.2] - The node to be removed is not a child of this node.

[lovedota]

Hi I had a simple code like this. After upgrading to React v15.0.2, whenever I click the link I got this message:

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

function removeChild(parentNode, childNode) {
  if (Array.isArray(childNode)) {
    var closingComment = childNode[1];
    childNode = childNode[0];
    removeDelimitedText(parentNode, childNode, closingComment);
    parentNode.removeChild(closingComment);
  }
  parentNode.removeChild(childNode);
}

• Here is my code:
• Component.js

onDispatchClick(event) {
   event.preventDefault();

   AppDispatcher.dispatch({
        type: RoutePickupConstants.DISPATCHING_RUNSHEET,
        routeId
   });

   api.dispatch(this.props.route.id).then(() => {
        AppDispatcher.dispatch({
            type: RoutePickupConstants.DISPATCHING_RUNSHEET_SUCCESS,
            routeId: this.props.route.id
        });
   });
}

getDispatchLink(route) {
    if (route.isDispatching) {
        dispatchLink = (
            <span>
                Dispatching...
            </span>
        );
    } else {
        dispatchLink = (
            <a href="#" onClick={this.onDispatchClick.bind(this)} className="action-link">
                Dispatch
            </a>
        );
    }

    return dispatchLink;
}


render() {
    let route = this.props.route;

    return (
        <tr>
            <td>{route.id}<td>
            <td>{this.getDispatchLink(route)}</td>
        </tr>
    )
}

1. Store.js

case RoutePickupConstants.DISPATCHING_RUNSHEET:

    routes.get(action.routeId).isDispatching = true;

    this.emitChange();
    break;

case RoutePickupConstants.DISPATCHING_RUNSHEET_SUCCESS:

    routes.get(action.routeId).isDispatching = false;

    this.emitChange();
    break;

[zpao]

Can you attempt to reduce this further? As is there's not enough for us to determine what might be wrong. At the very least, please share what's happening in onDispatchClick since that's when your problem occurs.

[lovedota]

@zpao
Thanks for your reply, I updated the code above, please check.

[zpao]

Thanks. There still isn't enough to go on, we'll need a reduced test case. A runnable example using jsfiddle or similar would be helpful. https://jsfiddle.net/reactjs/69z2wepo/

[syranide]

@lovedota You're not applying any form of "progressive enhancement" to your DOM? It would mess up the node hierarchies React expect.

[lovedota]

@zpao
Hi sorry for long response. Here is the demo for it https://jsfiddle.net/lovedota/pvtb9jbt/
This issue happens because I am using JQuery to add some additional Dom to React Dom.

Step to reproduce.

1. Click add => animation happen => jquery wrap React Node with
2. Click save => _react-with-addons.js:1272 Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node._

1. Click remove => _react-with-addons.js:15432 Uncaught TypeError: Cannot read property 'componentDidLeave' of undefined_

[syranide]

This issue happens because I am using JQuery to add some additional Dom to React Dom.

That's not allowed.

[alexzherdev]

I'm pretty new to this, but doesn't official documentation suggest you can actually do this? https://facebook.github.io/react/tips/use-react-with-other-libraries.html (see componentDidMount)

[syranide]

@alexzherdev It's OK to modify the content of empty React nodes. You may not mess with the hierarchy rendered by React as there is no way for React to figure out how to correctly apply updates to your modified hierarchy.

I'm honestly not sure if it's explicitly stated somewhere in the docs, but this is a limitation that applies to all frameworks really.

[alexzherdev]

That makes sense, thanks for the explanation. (assuming the above was directed to me 😃)

[zpao]

Thanks for following up @lovedota. As @syranide said, modifying the DOM generated by React will result in a bad time. You can do a few things safely but what you're doing is not ok. You are wrapping content ($.wrapInner('<div />')) which changes the structure React knew about, in particular reparenting nodes. When the virtual DOM representation gets out of sync with the real DOM, problems like this pop up and we can't recover.

[lovedota]

@zpao
I posted this issue because It happened after I upgraded React from 0.14 to 0.15.
Now I understood more. Thanks for your time !

[swlilike]

I have the same error. and solved it!

when I create a class Table named MFTbale, and used it in other page.like this:

render(){
<div>
……
<MFTable/>
……
</div>
}

some time I need hide MFTable. so. I guess, React remove it, but got a misttake.
I changed it

render(){
<div>
……
<div> <MFTable/></div>
……
</div>
}

well done.

[saeed3e]

@swlilike thanks for the solution.

[chanakasan]

@swlilike Thanks, solved my issue by wrapping the component in a div like below.

render() {
  return (
    <div>
      <Modal>...</Modal>
    </div>
  );
}

Probably the error was because the DOM nodes generated by my Modal component appended themselves to the body instead of parent element.

[u-can-miracle]

@swlilike Solution works

You should understand what happens is error line
React lib contains DOMChildrenOperations.js and here is function

function removeChild(parentNode, childNode) {
  if (Array.isArray(childNode)) {
    var closingComment = childNode[1];
    childNode = childNode[0];
    removeDelimitedText(parentNode, childNode, closingComment);
    parentNode.removeChild(closingComment);
  }
  parentNode.removeChild(childNode);
}

For me the same error occurred because childNode in my case was 2 dom nodes for fix this I just added one more div like parent for my element which was edited by 3th party library