New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
espringe opened this Issue Jan 30, 2014 · 10 comments

Comments

Projects
None yet
8 participants
@espringe

espringe commented Jan 30, 2014

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

This comment has been minimized.

Show comment
Hide comment
@zpao

zpao Jan 30, 2014

Member

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

Member

zpao commented Jan 30, 2014

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

@zpao zpao closed this Jan 30, 2014

@sophiebits

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits Jan 30, 2014

Member

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

Member

sophiebits commented Jan 30, 2014

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

@espringe

This comment has been minimized.

Show comment
Hide comment
@espringe

espringe Jan 30, 2014

Thanks for the great explanation, and super fast response!

espringe commented Jan 30, 2014

Thanks for the great explanation, and super fast response!

@yang

This comment has been minimized.

Show comment
Hide comment
@yang

yang Apr 19, 2014

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).

yang commented Apr 19, 2014

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 comment has been minimized.

Show comment
Hide comment
@gabrielflorit

gabrielflorit Oct 22, 2014

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

render: function() {

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

    return component;
}

gabrielflorit commented Oct 22, 2014

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

render: function() {

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

    return component;
}

basham pushed a commit to basham/adrx-advisees that referenced this issue Jul 5, 2015

RS-433 Service Indicators and Student Group Information #49
- App.jsx: Plug in window resize event to display dynamic tab labels.
- App.jsx: Fix the errors with changing the code from <p> to <div>. the
link below helped me.
facebook/react#997
@kulicuu

This comment has been minimized.

Show comment
Hide comment
@kulicuu

kulicuu Jul 13, 2015

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

kulicuu commented Jul 13, 2015

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

@zpao

This comment has been minimized.

Show comment
Hide comment
@zpao

zpao Jul 13, 2015

Member

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

Member

zpao commented Jul 13, 2015

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

@kulicuu

This comment has been minimized.

Show comment
Hide comment
@kulicuu

kulicuu Jul 14, 2015

@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.

kulicuu commented Jul 14, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@tusharmath

tusharmath Sep 22, 2015

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

tusharmath commented Sep 22, 2015

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

@deanius

This comment has been minimized.

Show comment
Hide comment
@deanius

deanius Jan 28, 2016

@yang - have you moved to React ? ;)

deanius commented Jan 28, 2016

@yang - have you moved to React ? ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment