react: Chrome 54 throws error: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.`

React@0.14.8 throws error messages at certain points in our app with Chrome 54 (Chrome 53 and other browsers work). I wasn’t able to pinpoint the cause.

DOMChildrenOperations.js?8e2a:41 Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.

screen shot 2016-10-20 at 12 58 41

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 12
  • Comments: 19 (5 by maintainers)

Most upvoted comments

Same here. Using React 0.14.6, error occurs in Chrome 54.

Debugging we see that here we get childNode as NULL which triggers the error.

Going back the stack trace in this point (manually adding a try/catch and also breakpoints) I can see that in here update.markupIndex has the value NaN.

That update variable is at this moment just like this:

sms-react-err1

Adding to this: I noticed that the when this happens, the updates array received in here has always a pair for this NULL INSERT_MARKUP: a similar NULL but with type REMOVE_NODE.


Interestingly enough, I was able to narrow down one case to a really small piece of a component of mine that triggers this. Simply having something like this:

let content = <div> ... </div>;
return (
  <div>
      <div> ... </div>
      <div> {content} </div>
  </div>
);

Then after some tests I was able to see that {content} provokes the error (without it, it breaks in other places). So I was able to avoid the error happening in this part by doing:

let content = <div> ... </div>;
return (
  <div>
      <div> ... </div>
      <div> &nbsp; {content} </div>
  </div>
);

But then it breaks with the same error again in other part, now within an external component (griddle-react^0.3.1).

FYI - I am trying to work in a reproducible scenario for this.

Also now ran into this one, exclusively in Chrome 54:

Uncaught Error: processUpdates(): Unable to find child 1 of element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID

screen shot 2016-10-20 at 13 07 50

upgrading chrome fixed it

I would bet this is due to the V8 bug mentioned by @developit on Twitter where push ends up returning the value pushed instead of the index.

Same here in our company using react with webpack dev server after upgrading to Chrome 54. On production works perfectly fine. Occurs when rerendering components. React@0.14.2.

Yes, we encounter this same issue, the stack trace shows that the markupIndex is NaN in this line https://github.com/facebook/react/blob/0.14-stable/src/renderers/shared/reconciler/ReactMultiChild.js#L65

Placing a conditional debugger on this line resolve this issue mysteriously, and upgrading react to @15.3.2 fix it, since the ReactMultiChild is changed in @15.3.2.

It happens in our code base where there are a lot of react components rendered ( for example large table with pagination), and where we render other non react component inside react component, and where we use setInterval to call react rendering function constantly.

Some issues occur in PC and chrome54, and some in mac and chrome54. All are working fine for chrome53.

However, since 0.14.8 is widely used in production code, and it is still supported, we would like to see a fix for that. Thanks!

We are getting the same errors mentioned above. We are trying to upgrade, but the APIs from 0.14 have changed somewhat and that is requiring us to rebuild a lot of our app.

This is only impacting dev builds for my app. Is anyone experiencing this in dist builds? Also, any ideas on why this would only impact dev builds?