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

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",` — mysiar, Mar 22 '17 at 08:32

score 16 · Answer 1 · edited Jun 24 '17 at 02:24

16

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.

edited Jun 24 '17 at 02:24

HDJEMAI

7,766
41
60
81

answered Jun 24 '17 at 01:55

Tawanike

331
2
6

This should be the accepted answer. worked for me specifically for react router ^4. – dskoda1 Jul 10 '17 at 13:39
Wah, it works perfect with "react-router": "^4.2.0", "react-router-redux": "^4.0.8" – Mushfiq Aug 29 '17 at 19:19

score 4 · Answer 2 · answered Apr 24 '17 at 04:44

4

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

answered Apr 24 '17 at 04:44

Yumiko

358
3
12

score 2 · Answer 3 · edited Mar 15 '17 at 08:35

2

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.

edited Mar 15 '17 at 08:35

Raymond Hettinger

182,864
54
321
419

answered Mar 14 '17 at 18:15

user3354035

21
2

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. – Gabriel's Messanger Mar 14 '17 at 20:43

score 0 · Answer 4 · answered Feb 27 '18 at 05:54

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.

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

4 Answers4