React-devtools: Having Dev Tools open causes error/breaks app with findComponentRoot(): Unable to find element

[jayrenteria]

After the latest update, it seems that having react dev tools open while working locally on my project is causing the following error to occur:

There does not seem to be anything specific that makes it happen, it seems that if I have the dev tools open and start navigating or clicking things, it will cause the error.

Other info:
React version - [email protected]

[gaearon]

Can you provide a minimal project reproducing the issue? It’s very hard to say something otherwise.
(The issue template you ignored is asking about this 😉 )

[eddiesanmarco]

I'm also having issues with this same exact error. It's on any virtual DOM change (includes mounting data).

[gaearon]

Please provide a project and I’ll be happy to look into this.

[eddiesanmarco]

I can't really provide an entire project on this. It happens on every instance of React working with the DOM on every project I have. If I turn off the extension then my projects load/work fine.

[gaearon]

I can't really provide an entire project on this

I am not asking you to share your entire projects. I'm asking you to provide a minimal reproducing example, which is common in any bug tracker, both as a common courtesy and as a way to ensure your issue gets fixed faster (and that the right thing gets fixed).

If you can really reproduce this on every project, it shouldn't take more than a few minutes for you to create a new project with something like create-react-app, pick the right versions of React, and then describe the exact sequence of steps to reproduce the issue. This will help me get it fixed for you.

[gaearon]

(I know the likely cause, which is https://github.com/facebook/react-devtools/pull/619, and we can work around it, but it's also likely this is surfacing a legitimate bug in your application, although in a weird way. I would like to know the exact cause before putting a patch to work around it, so this is why I’m asking for a repro case.)

[eddiesanmarco]

I'm sorry I can't replicate it for you, I hope someone else has the ability to do so. What I will say if it was a bug in my application I find it strange that someone else would have the exact same error as I do. Also I have a production version & staging which is exactly the same with the exception of that I had your extension enabled on the staging version.

Hopefully its #619 although that looks merged already so I'm not sure if it would still be an issue. In any case most likely you're going to see more people submit this bug today+ so I assume someone will have the time to replicate it for u. In the meantime I'll just need to disable until it's resolved.

[gaearon]

What I will say if it was a bug in my application I find it strange that someone else would have the exact same error as I do.

With the size of the React userbase, it is very common that multiple people have the same app issue (e.g. invalid DOM nesting) which triggers the same runtime behavior.

Hopefully its #619 although that looks merged already

No, what I’m saying is #619 is what is causing the issue. My guess is it is an application bug (invalid DOM nesting) that was dormant, but #619 made it visible. You’d likely get the same exact issue in your app without DevTools if you called findDOMNode() on a component that’s causing this. But I can’t verify my guess without a project reproducing this.

Now, the bottom line is of course we should fix it on our side. But I’m still hoping somebody will provide a reproducing case so that we can get a full understanding of what happened, and whether the root cause is a bug in React, DevTools, or the apps.

[bdorsey16]

+1 on this issue as I struggled with the findComponentRoot error all day only to finally realize it only ever happened when I opened react-devtools as it would delete the node I was looking at once I was done with it. I haven't had a chance to make a sample project to replicate it yet.

[nikolov-tmw]

@gaearon I've managed to create a completely minimal example. You can see it here - http://s.codepen.io/nikolovtmw/debug/zwzwdK/VJMxxZZYVRZM

Steps to reproduce:

1. Load pen from above(without developer tools).
2. Click on click me
3. Does it work? should show up under click me
4. Reload page
5. Open React Devtools
6. Click on click me
7. Watch in horror the uncaught Error that breaks the world :cry:

Things to note - I'm working with React 0.14.9(I know it's outdated, but we just recently updated from 0.13.* and we're not ready yet to go through and fix everything for the next update) and I can confirm that testing the same pen with React 15.0.0 works just fine.

[gaearon]

Thanks for the CodePen! Will take a look now. 👍

[gaearon]

This will be fixed in 2.1.4.

You can get it from a zip file if you don’t want to wait for it to appear in the Chrome store. (Extensions > check Developer mode > unzip, choose Load unpacked extension).

[email protected]

But I expect it will appear in Chrome store within an hour.
Thanks again to @nikolov-tmw for providing a reproducing case.

[jayrenteria]

Thanks everyone, sorry I was unable to provide a minimal project in a timely manner, many thanks to @nikolov-tmw for doing so!