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 :(

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.

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",