"Warning: unmountComponentAtNode()" when external window is open

[danielcompton]

If there is an external window open, reloading the browser triggers an error which will log two errors to the console:

react-dom.inc.js:526 Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by another copy of React.
router.cljc?rel=1553207189704:204 Uncaught Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops

The external 10x window is now non-functional, so reloading the browser a second time will load the app without errors and re-attach to that window.

It seems like there is some state hanging around between browser reloads which causes this, although that might be a red herring.

cc: @stumitchell

[tanzoniteblack]

@danielcompton as a stop gap measure, I was able to address this issue by adding (reagent.core/force-update-all) to the init function in our cljs that sets up our app. Prevents the warning and the non-functional 10x window on every other reload, but does have the side effect of pinning the 10x window again.

Correction: This at least makes it so it doesn't happen consistently, have still seen it happen once or twice with this turned on

[werenall]

I tried fixing that on the consumer lvl by catching an unload event with hope for clearing the faulty state. No luck :/

Call me silly, but for the time being, I just hide 10x whenever I have to see something that 10x overlaps in the regular view.

document.getElementById("--re-frame-10x--").style.display = "none";

and to show it again:

document.getElementById("--re-frame-10x--").style.display = "initial";