Uncaught Error: Invariant Violation: findComponentRoot(…, …$110): Unable to find element. This probably means the DOM was unexpectedly mutated

Question

What I\'m doing wrong with nested cycles in React? I have searched information in Google and I didn\'t find anything suitable. Can you help me find, what I understand wrong?

Answer 1

This error is because somewhere there is HTML markup that is not valid.

In my case, I clumsily had React generating a form tag within a button tag and never realized until this error started to show up. Check your markup for nesting mistakes that are not allowed.

Answer 2

So the problem is you're creating a virtual DOM structure like this:

<tbody>
   <tr>
      <div>
         <td>...</td>
         <td>...</td>
      </div>
   </tr>
</tbody>

Because <div/> isn't a valid child of <tr> the browser actually creates DOM representing this:

<div> </div>
<table>
<tbody>
   <tr>
      <td>...</td>
      <td>...</td>
   </tr>
</tbody>
</table>

^fiddle

When react goes to update, it's looking at that <tr> and wondering where the <div> went. Instead it finds a <td> so it throws an error.

Answer 3

I had this same issue and it turned out to be two elements in the DOM with the same ID (inadvertently).

Answer 4

I had similar problem and the reason was that I was using <form> tag inside the React.js component and I rendered it to a page position that already had a <form> open. Forms can't be nested. So you can get this error even if the HTML inside the component seems to be valid.

Answer 5

I got the abovementioned error trying to do this for a test:

component = React.addons.TestUtils.renderIntoDocument(<MyTableRow />)
React.findDOMNode(component)

My fix was to wrap it before rendering:

component = React.addons.TestUtils.renderIntoDocument(<table><MyTableRow /></table>)
table = React.findDOMNode(component)
row = jQuery(table).find("tr")[0]

Answer 6

it can sometime also occur when React is loaded from two different locations (e.g. from require and in the HTML)