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

[espringe]

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>. :shit:

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

[sophiebits]

We'll hopefully have an explicit warning for this soon.

[espringe]

Thanks for the great explanation, and super fast response!

[yang]

Doesn't this leak an implementation detail of React—namely that it relies on parsing HTML strings? It's certainly very possible to programmatically construct a DOM with nested p tags.

Besides documenting this, it would also be helpful to highlight other such cases, if any exist (or at least pointing to another resource).

[gabrielflorit]

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

render: function() {

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

    return component;
}

[kulicuu]

I'm getting this error but only in Chrome, not in Firefox.

[zpao]

@kulicuu could be different browsers handling incorrect markup differently. Without any other information that's the best I can say.

[kulicuu]

@zpao See #4372 reopening #4364 and please tell me if my markup is incorrect. (edit: I see you are referring to this thread context above)
(...it wouldn't be my markup anyways?(, as I don't touch the actual DOM) it would be React's right?)
and , Whether or not it's incorrect is relative to the opinion of the respective browser approaches apparently, the same old crossbrowser banes.

[tusharmath]

It happened to me also. Apparently the adblocker was the culprit.

[deanius]

@yang - have you moved to React ? ;)

[RamAndKrishna]

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

so what is the solution for this ?