Invariant Violation: ..... This probably means the DOM was unexpectedly mutated (e.g. by the browser).

I’m getting a whole bunch of errors, starting with: Danger: Discarding unexpected node: ... … finishing with Uncaught Error: Invariant Violation: findComponentRoot(..., .r[129yk].[3].[0].[1].[0].[2].[1]): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g. by the browser).

By changing React.DOM.p (widgets/settings_login.js line 34): https://github.com/agavelab/lostd-app/blob/reactjs-bug/src/scripts/widgets/settings_login.js#L34

to React.DOM.div this problem goes completely away. The problem is cross-browser.

Steps to reproduce

Checkout: https://github.com/agavelab/lostd-app/tree/reactjs-bug cd lostd-app/src python -m SimpleHTTPServer (Maybe you don’t even need this, and it’ll work directly opening index.html with a browser) http://127.0.0.1:8000 And you should see the error in your console

Change React.DOM.p to React.DOM.div and everything is perfect

[zpao]

So the problem here is that when you do <p class="parent"><p class="child"></p></p> browsers are like “aw helllllll no” and they change the DOM to <p class="parent"></p><p class="child"></p> This mutation happens after React has done it’s thing.

This is completely true if you were doing this in straight HTML too, so it’s not a new problem. It’s just that you don’t try to move elements in HTML. You can see this with some simple styles. On top of that, there are several ways in which this can happen. Another example is nested <a> tags.

Here’s an example of the problem in HTML+CSS: http://jsfiddle.net/zpao/fgth2/ (and in fact it looks like the DOM gets super crazy and adds an entirely new <p>. 💩

And since React isn’t doing anything wrong, I’m going to close this out. Use the <div> to wrap <p> and you’ll be fine. Thanks for the detailed report though! I

[gabrielflorit]

This also happens when I conditionally return a null component, e.g.:

render: function() {

    var component = ifSomething ? (<Component />) : null;

    return component;
}