search

acdlite / redux-router

Redux bindings for React Router – keep your router state inside your Redux store
MIT License
2.3k stars 200 forks source link

Uncaught Invariant Violation: findComponentRoot ... #234

Closed happypoulp closed 8 years ago

happypoulp commented 8 years ago

Hi,

I am getting this issue when navigating from one route /:id to another route /:id:

Uncaught Invariant Violation: findComponentRoot(..., .0.$1.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 ``.

I managed to reproduce this issue in a "minimal" repo here: https://github.com/happypoulp/redux-router-issue . What seems to create the issue is the dispatch of a thunk action (one request action that reset store and a bit later a success action that populate the store). Somehow, when navigating from /1 to /2, many render phases are triggered which seems normal but during one of them, stale data are provided to a component. It ends up making React to search for elements that were already removed from the DOM during a previous render phase and then the error is thrown.

It's not very clear to me what's happening but the thing is, that I was only able to reproduce this issue using redux-router (I use version 1.0.0-beta5 and got no issue without redux-router, with just react-router). I also reproduced it with redux-router@1.0.0-beta6.

Is this a bug or am I misunderstanding something?

Thanks for redux-router!

happypoulp commented 8 years ago

Maybe this issue is actually a manifestation of react issue: https://github.com/facebook/react/issues/2410 .

Scarysize commented 8 years ago

Hm, it seems like it yeah. I don´t have the time to try it out myself though. I will close this up, assuming this is a react issue, will reopen if more people do have this issue. Thanks for reporting and researching, always appreciated!

davidcrouch commented 8 years ago

I'm commenting because I think there is some justification for re-opening this issue. IMO the error reported in React is a byproduct of a design pattern flaw in Redux apps and not necessarily a bug. In my situation I am using multiple instances of a component and Redux with async flow - very similar to @happypoulp's example. The error occurs when loading the component for the second time. Coincidentally, I also stopped the error by removing the dispatch(REQUEST) line in my code.

My store includes an "isLoading" key and a "results" key. I call "dispatch(REQUEST, isLoading=true)" before calling the asynchronous get data API and then call "dispatch(RESPONSE, isLoading=false, results=[..])" upon receiving the response from the server API.

The error is produced in the component from the properties from the REQUEST call, specifically, when results=[], but only when loading for the 2nd time. The 1st time it works fine. It appears there is a problem when trying to change the nodes in the table body of my app since they no longer exist (unmounted).

Unfortunately, I don't fully understand the internals of React's diffing algorithm so I can't articulate the exact problem but I think I'm close. Any ideas?