Invariant Violation: Unable to find element when using middleware and conditionally rendering <Link>

[lukekarrys]

I ran into this error in an application of mine, but didn't think it was a bug at first. I was able to create a reduced test case, but I could just be doing something wrong. The error goes away if I remove the react-router-redux middleware, but I'm still not exactly sure why the error is happening.

Here's the gist with the reduced test case (apologies as its still pretty complicated). The two parts that I can edit to get around the error are removing the middleware and rendering somethings besides a Link.

Here's a brief explanation of what I'm trying to do:

1. Render a redux connected component (<Page>) that has a loading indicator at /page/:param
2. Once the <Page> is done loading its "data" (which is just a setTimeout in the gist) render some elements conditionally based on this.props.params.param
3. Navigate from /page/1 to /page/2

What I'm seeing is that if the conditionally rendered element is a <Link> I get an invariant violation when navigating from /page/1 to /page/2. If I either change the <Link> element to something else (like an <a> or <span>) or remove the middleware then the error goes away.

[lukekarrys]

After some further testing, it isn't specific to rendering a <Link> but when rendering any element with an onClick handler. I'm gonna close this because after more investigation I can't see how is a bug with react-router-redux or any of the related libraries.

I found a similar question on Stack Overflow, and hopefully will figure it out there.

[0x80]

We had a very similar issue although I don't have code available atm to show it. We solved it by removing react-router-redux. Seeing that the person on SO also has this issue in combination with redux-simple-router, I would still suspect that the problem is with this library, so I don't know if closing the issue is a good idea.

[lukekarrys]

@0x80 I found a solution that I detailed in the latest revision of the gist above and in the Stack Overflow question. I don't think its a problem with this library but a timing issue with multiple actions being dispatched (one of which being from this library) which was was why changing my code from componentWillReceiveProps to componentDidUpdate fixed it for me.

[0x80]

@lukekarrys OK I'll have to investigate still if our problem was similar but thanks for the info!

[latkins]

I had the same issue, and switching componentWillReceiveProps to componentDidUpdate also fixed it for me.

[j]

PS. I'm getting this same issue. The suggested fixes didn't seem to help, but I didn't want to dig too far into it.

The issue happens for me when my component doesn't initially render the Link, then hits a route that goes to render it, the error happens then. If I render the link but set the style to be hidden, the error goes away (meaning it's not conditionally rendering the Link and always is)

@lukekarrys