react-router-redux: Cannot read property 'listen' of undefined at syncHistoryWithStore

Question

I'm in the process of Refactoring clean Ract app to Redux. I have deifned some actions and reducers tested. I got stack on Router & History.
I'm getting error:

Uncaught TypeError: Cannot read property 'listen' of undefined at syncHistoryWithStore

from simple code:

    //configureStore.jsx
    import redux from 'redux';
    import {buildingReducer, levelReducer, roomReducer} from 'reducers';
    import {routerReducer} from 'react-router-redux';

    export let configure = (initialState = {}) => {
        let reducer = redux.combineReducers({
            building: buildingReducer,
            level: levelReducer,
            room: roomReducer,
            routing: routerReducer
       });

       let store = redux.createStore(reducer, initialState, redux.compose(
        window.devToolsExtension ? window.devToolsExtension() : f => f));

       return store;

    };

&

    //app.jsx
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Router, Route, IndexRoute, browserHistory, hashHistory } from 'react-router';
    import {Provider} from 'react-redux';
    import {syncHistoryWithStore} from 'react-router-redux'

    var actions = require('actions');
    var store = require('configureStore').configure();

    const history = syncHistoryWithStore(browserHistory, store);

    ReactDOM.render(
      <Provider store={store}>
        <Router history={history}>
            <Route path="/" component={Main}>
                <IndexRoute component={Map}/>
                <Route path="report" component={Report}/>
                <Route path="about" component={About}/>
            </Route>
        </Router>
      </Provider>,
     document.getElementById('react_app')
    );

I'm out of any idea why this happens :(

Eweneck

I am having the same issue. Did you figure it out? – Jaredjarek

I did downgrade packages to versions: "react": "^0.14.7", "react-dom": "^0.14.7", "react-router": "^2.0.0", "react-router-redux": "^4.0.0", – Eweneck

Answer 1

I solved this issue by following this comment. This after I had updated to "react-router": "^4.1.1" and to "react-router-redux": "^4.0.8". This does solve the problem of using browserHistory from react-router but gives you a work around.

The work around requires you to:

import { createBrowserHistory } from 'history';
const history = syncHistoryWithStore(createBrowserHistory(), store);

The comments on the issue seem to suggest trying out different combinations of the 2 plugs. I tested the code by installing "react-router": "^3.0.2" and "react-router-redux": "^4.0.8" and that worked also.

Chelsea

This should be the accepted answer. worked for me specifically for react router ^4. – Commorant

Wah, it works perfect with "react-router": "^4.2.0", "react-router-redux": "^4.0.8" – Poplar

Answer 2

I am working with a react_on_rails project. I got the issue fixed with downgrading to below versions.

"react-redux": "^4.4.6",
"react-router": "^3.0.0",
"react-router-redux": "^4.0.7",

Housefly

Answer 3

I don't see a problem you code. It works for me with with this combination: "react-router": "^3.0.2", "react-router-redux": "^4.0.8"

A possible source of your problem is that you're working with a different version that is known to have issues.

Paratrooper

It's really not an answer at all. You not telling the question author how he can solve his problem. Try to make more detailed answer what is the source of error, if its version dependent or has been a project issue which was eventually corrected, describe it. Suggest what he can do if lib versions switch in not an option in his case. – Unrealizable

Answer 4

If anybody looking for a solution to this matter latest:

looks like they have updated the history repo:-

use 'createHistory' instead of 'createBrowserHistory'

please try as below in store:

import { createHistory } from 'history';
const history = syncHistoryWithStore(createHistory(), store);

and also make sure that 'routerReducer' added as one extra reducer to your combined reducers.

regards.

Osei