Uncaught Invariant Violation: findComponentRoot... with eventlisteners and pushState

[ianks]

Summary

I am having an issue with redux-router which prevents React from properly being able to unregister a an onClick listener. I have narrowed down the exact case that this happens, although I do not have a working small example yet.

Essentially, here is what happens:

1. I have two components: the Main component, and a Loading component.
2. Main has a button, or something which registers an onClick event handler: i.e.<button onClick={function() {})>Something</button>
3. If my data is loading, I render the Loading component, else I render Main.
4. In my app, at some point I call pushState(null, '/tips', {view: 'feed'}), which updates the URL.
5. In response to the URL changing, my Main component is re-rendered, notices the URL changed, and hits an external server to pull fresh data.
6. While the data is fetching, I conditionally render the Loading component. HERE IS WHERE THE ISSUE OCCURS
7. At this point, React attempts to deregister all of my event listeners, but it can no longer find the button we mounted earlier. It gives us the classic, not very helpful:

Uncaught Invariant Violation: findComponentRoot(..., .0.0.1.0.2.0.$ed808925-27df-4743-8e18-c3723ffe0c3c.1:$0.1.0.$0.$cancelled): 
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 ``.invariant @ invariant.js?

Things I have tested:

• I have confirmed this issue does not occur when I directly use component state via setState to manage the state instead of the URL.
• This issue only occurs when an event listener is registered ( i.e. removing onClick on the button makes this error go away).

  Where to go from here

• [ ] Create a reproducible bug. Can you guys recommend a simple app to try to reproduce this on for me?
• [ ] Clear up any confusion about the issue. I realize the text dialog is not optimal, but I wanted to report this while it was still fresh in my head.
• [ ] Help to fix the bug!

[ianks]

It looks like I was dispatching a second action before the first one was completed. i.e. dispatching to get fresh data was called before pushState dispatch was finished.