<p dir="auto">Our React app was triggering the following error during navigation events:</p>
<p dir="auto"><code class="notranslate">Uncaught TypeError: Cannot read property 'firstChild' of undefined</code></p>
<p dir="auto">The error was occurring in the function <code class="notranslate">findComponentRoot</code>, when it failed to find a component for an event callback.</p>
<p dir="auto">In our app, this was happening when we would navigate during a blur event, and call <code class="notranslate">unmountComponentAtNode</code> on the rendering, in order to refresh the page. The docs for <code class="notranslate">unmountComponentAtNode</code> say</p>
<blockquote>
<p dir="auto">Remove a mounted React component from the DOM and clean up its event handlers and state</p>
</blockquote>
<p dir="auto">However, this does not seem to be the case. After we refresh the page with <code class="notranslate">unmountComponentAtNode</code>, there were other React-bound callbacks still in React's queue for that event. Leading to the error.</p>
<p dir="auto">The docs and intuition seem to imply <code class="notranslate">unmountComponentAtNode</code> should clear these callbacks, since it knows the components will no longer exist to handle them.</p>
<p dir="auto">Hi,</p>
<p dir="auto">When trying to unmount my whole app, I got some error.</p>
<blockquote>
<p dir="auto">Uncaught TypeError: Cannot read property 'firstChild' of undefined<br>
ReactMount.js:606ReactMount.findComponentRoot<br>
ReactMount.js:606ReactMount.findReactNodeByID ReactMount.js:552getNode<br>
ReactMount.js:128executeDispatch EventPluginUtils.js:109SimpleEventPlugin.executeDispatch<br>
SimpleEventPlugin.js:305forEachEventDispatch EventPluginUtils.js:95executeDispatchesInOrder<br>
EventPluginUtils.js:119executeDispatchesAndRelease EventPluginHub.js:46forEachAccumulated<br>
forEachAccumulated.js:25EventPluginHub.processEventQueue<br>
EventPluginHub.js:251runEventQueueInBatch<br>
ReactEventEmitterMixin.js:18ReactEventEmitterMixin.handleTopLevel<br>
ReactEventEmitterMixin.js:44handleTopLevelImpl ReactEventListener.js:80Mixin.perform<br>
Transaction.js:134ReactDefaultBatchingStrategy.batchedUpdates<br>
ReactDefaultBatchingStrategy.js:66batchedUpdates<br>
ReactUpdates.js:109ReactEventListener.dispatchEvent ReactEventListener.js:175</p>
</blockquote>
<p dir="auto">I think it's not a big deal.</p>
<p dir="auto">According to what I see with the debugger, it seems to be because a <code class="notranslate">SyntheticMouseEvent</code> is trying to get dispatched. And I guess the target has just been unmounted...</p>
<p dir="auto">Note that my use case looks like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var Hello = React.createClass({
    render: function() {
        return &lt;div onClick={unmount}&gt;Hello {this.props.name}&lt;/div&gt;;
    }
});"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-v">Hello</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createClass</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-en">render</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">unmount</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>Hello <span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">When using an <code class="notranslate">unmount</code> synchronous implementation, I get this error.<br>
When adding a setTimeout 0 in the unmount code, I got no error.</p>
<p dir="auto">I could not reproduce this in a jsfiddle, but I guess it's probably because I don't really know how batching work in React.</p>