occasional Uncaught Invariant Violation error (possibly on page transition?)

[billyjanitsch]

I've noticed when experimenting with this monitor, I get errors like the following:

Uncaught Invariant Violation: findComponentRoot(..., .0.1.1.1.$/=10.1.1.0.$router.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID``.

The monitor's behavior doesn't appear to be affected. The DOM node corresponds to an item in the monitor's diff tree (in the above example, state.router, though I've also seen it for other top-level parts of the state, so it may not be related to react-router. It does appear to happen often on page transitions.

I'm sorry that I don't have a more reproducible example at the moment. I'll try to dig in and find a more specific cause when I have time. Perhaps you have some idea of what might be causing this?

[beeftornado]

Also, if you load it after, say, the LogMonitor and then switch over to Inspector via changeMonitorKey then the error does not happen.

export default createDevTools(
  <DockMonitor
    toggleVisibilityKey='ctrl-h'
    changePositionKey='ctrl-q'
    changeMonitorKey='ctrl-m'
    defaultSize={0.22} >
    <LogMonitor />
    <Inspector />
  </DockMonitor>
)

[alexkuz]

@billyjanitsch @beeftornado
thanks to @codeheroics, inspector doesn't crash now while rendering symbols, that could fix this bug. Can you please check it?

[billyjanitsch]

@alexkuz it doesn't look like 0.3.3 has been published to npm yet

[alexkuz]

@billyjanitsch oops, sorry, fixed that.

[billyjanitsch]

I still get this error using 0.3.3, unfortunately.

[alexkuz]

Sigh...

[beeftornado]

Just also confirming the issue still present in 0.3.3

[rewop]

I am running version 0.3.4 and I am having the same problem

[alexkuz]

Thank you, I'm aware of it and was able to reproduce it, just hadn't much time to look into.

[benjie]

Could it be related to the <div> inside the <ul> surrounding the <li>s?

Here's it happening for me, I hope it helps:

Note the error below references.2fi53y9ifi8.$22.1.1.1.$/=10.1.1.0.$route.3.$params but the DOM above has .2fi53y9ifi8.$22.1.1.1.$/=10.1.1.0.$route.3.$modules (params -> modules)

[alexkuz]

@benjie good catch, thank you! Indeed, react-json-tree renders <div />, if root is hidden. Should be fixed, even if it's not related to this error :)

[alexkuz]

Ok, I published a fix in v0.4.1, which I'm not proud of, since I have no idea how it works :) But in my case it fixes the issue. I hope someone will figure out what is happening there.

[alexkuz]

For the reference - seems like it's related to React batching (see facebook/react#6538 (comment)) - I observed same symptoms, like special behavior of onClick event, also the fix prevents batching on component mounting. Maybe it could be reproduced in a simple example, if we try to update react-json-tree multiple times in a few moments (like it happens in a real-life app).

[gaearon]

Can you please see if facebook/react#6650 fixes this for you?

[alexkuz]

@gaearon actually, I forgot to test >= 15 - I'm using 0.14.8 now. I can't reproduce it with v15.0.1 (the styling is broken for some reason, but that's the other issue, obviously).