Existence of `componentDidMount` throws "Error while invoking `findComponentRoot`"

[dlindahl]

Scenario

I am trying to use React to dynamically replace a tbody tag with my app's content. In addition, I need to use a componentDidMount callback to handle some custom event binding.

Problem

As soon as the componentDidMount callback is added to React.createClass, React throws the following errors:

Error while invoking `findComponentRoot` with the following ancestor node: <tbody id=​"content">​…​</tbody>
​    
Uncaught Error: Invariant Violation: findComponentRoot(..., .r[3skhu]): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g. by the browser).

JSFiddle here

Conclusion

The content still renders, but the error is a bit unnerving. Simply removing the callback prevents the errors from being thrown.

I'm brand new to this, so its possible that I'm trying to make React do something that it is not meant to handle. But either way, I think the mere existence of an empty callback should not be throwing any errors.

FWIW, other scenarios that involve injecting content rather than replacing an existing DOMNode seem to work fine with or without the componentDidMount callback.

[zpao]

<table>s are a bit of a tricky situation in general - we've had some issues thanks to the way browsers insert markup.

In this case, when you mount the <tbody>, that original node doesn't leave the document. That's normal behavior for React. The markup returned from your render function is then inserted into the tbody, but your markup contains a tbody, which browsers don't like. So your tbody node is actually dropped (to see this happen, change the id in your render function). React uses the node it thinks it created as a reference, but since the browser dropped that node, React is going to be confused. That's why you see that error, we actually pass the DOM node to componentDidMount so we try to get that node first and then fail. Getting rid of that method just hides the error but it will still come back to bite you later. Your initial render works BUT I think you'll run into errors if you ever try to do any state updates or anything that tries to re-render.

I think this is probably why you see other cases work just fine. There are some other cases where you'll run into issues as browsers change the DOM. For example, mounting into <p> or <a> will likely cause problems - see some of these examples in #101.

So my suggestion: render into the wrapper div and include the static content inside your component.