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

[j]

I'm just reviving the issue that the original person closed #244.

Basically he has a gist that shows the steps he took to fix the error. @0x80 mentioned that removing the reducer fixes the problem, and I want to also confirm that removing it causes the app to work, which leads me to believe that it has something to do with this library.

I basically have (this won't obviously work copy/paste):

import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';

class Pagination extends Component {
  linkTo(label, page) {
    const { total, to } = this.props;
    const href = to + page;

    if (page < 1 || page > total) {
      return null;
    }

    return <Link to={href}>{label}</Link>;
  }

  render() {
    const { current } = this.props;

    return (
      <div className={styles.this}>
        {this.linkTo('Previous', current - 1)}
        {this.linkTo('Next', current + 1)}
      </div>
    );
  }
}

Pagination.propTypes = {
  to: PropTypes.string.isRequired,
  current: PropTypes.number,
  total: PropTypes.number,
};

const routes =  (
  <Route path="/" component={App}>
    <IndexRoute component={Home} />
    <Route path="pages(/:page)" component={Category} />
  </Route>
);

const reducers = combineReducers({
  entities,
  routing,
});

Then when I visit /pages root, then click then it only renders the "Next" button. Clicking "Next" throws the error.

A way around it initially was for me to not return null on the Previous link and to just do a "display: none" on it, which fixed the issue. Then I tried doing the things in #244 and things broke. Then I reverted back to my original code but removed this library since I'm not yet using it, and it works.

[j]

Okay, so I was able to pin-point where the issue was (at least in mine and @lukekarrys case). When you use a thunk to dispatch both a sync and async action it freaks out. Two other solutions are to make the sync dispatch async, or for the redux-thunk to assume all thunks are asynchronous which probably won't happen b/c this will most likely break most apps.

Change thunk to this and errors go away:

function thunkMiddleware({ dispatch, getState }) {
  return next => action =>
    typeof action === 'function' ?
      process.nextTick(() => action(dispatch, getState)) :
      next(action);
}

module.exports = thunkMiddleware

[timdorr]

Is this still occurring with 4.0.0 (just released)?

[lukekarrys]

I updated the gist from my original issue and can still get it to error: https://gist.github.com/lukekarrys/a71aecac0426e86643b4#file-page-js-L14-L26.

If I follow the react-router lifecycle docs and do dispatches from componentDidUpdate and not componentWillReceiveProps my error goes away. @j's explanation makes sense, but I'm currently happy with using componentDidUpdate as the fix in the app where I first encountered this bug.

[j]

@timdorr I'll run the example with the break in a few with 4.0.0. I can agree to say that I'd be happy using an alternative route / hack to make things work, but my only issue with saying that is that I lost about a whole day and a half with figuring out the issue in general as well as time took to refactor. (Since the error points the user in a completely different path). I'm just for helping others who run into it to save other companies some money in the long run 😜 I'll run my simple example with 4.0 and see if I can dig further, otherwise, bye bye thunks, hello promises.

[j]

@timdorr Okay, I ran the example with 4.0.0 and the error exists still. After digging more into it, this library listens to history changes and dispatches redux actions synchronously.

I pushed a running example. visit /page after running the server and click on any of the links and it should produce the error: https://github.com/j/react-router-redux/commit/9b57969977d644ecaca15169e4f82eb7a39a342e.

Some possible patches:

1. Make this method async: https://github.com/reactjs/react-router-redux/blob/master/src/sync.js#L69
2. When using node-thunk (or any middleware I'm assuming), users must dispatch events either all sync or all async, not mixed.
3. Modify the history library to call all changeListeners asynchronously: https://github.com/reactjs/history/blob/master/modules/createHistory.js#L75
4. Redux should warn users somehow who are dispatching actions that are both sync/async.
5. Not likely to happen, but redux should possibly dispatch events asynchronously

[timdorr]

Try switching your componentWillReceiveProps to componentDidUpdate.

My suspicion is connect() is causing the issue when running in dev-mode. It subscribes during cWU when running a non-production build to handle hot reloading. You can also try running that with a production build and see if you still see the error.

I don't think this is a fault of react-router-redux, just a misunderstanding with react-redux's internals. You shouldn't have to concern yourself with sync vs async actions. But it does have some implications with dynamic elements that is non-obvious.