This repository has been archived by the owner. It is now read-only.

Cannot read property 'listen' of undefined #348

Closed
reggi opened this Issue Apr 5, 2016 · 10 comments

Comments

Projects
None yet
10 participants
@reggi

reggi commented Apr 5, 2016

Unsure whats happening here. Just dropped in the example code from the readme

  unsubscribeFromHistory = history.listen(handleLocationChange);
                                  ^

TypeError: Cannot read property 'listen' of undefined
import React from 'react'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import { Router, Route, browserHistory } from 'react-router'
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'

import Layout from './views/Layout'
import Guts, { reducer } from './views/Guts'
import GutsDev from './views/GutsDev'

const store = createStore(
  combineReducers({
    reducer,
    routing: routerReducer
  })
)

const history = syncHistoryWithStore(browserHistory, store)

module.exports = (
  <Provider store={store}>
    <Router history={history}>
      <Route path='/' component={Layout}>
        <Route path='/main' component={Guts} />
        <Route path='/main/dev' component={GutsDev} />
      </Route>
    </Router>
  </Provider>
)
@timdorr

This comment has been minimized.

Show comment
Hide comment
@timdorr

timdorr Apr 6, 2016

Member

Do you have the appropriate versions of stuff?

Please use Stack Overflow or Reactiflux for support. This is a bug tracker.

Member

timdorr commented Apr 6, 2016

Do you have the appropriate versions of stuff?

Please use Stack Overflow or Reactiflux for support. This is a bug tracker.

@timdorr timdorr closed this Apr 6, 2016

@jasonswearingen

This comment has been minimized.

Show comment
Hide comment
@jasonswearingen

jasonswearingen Oct 12, 2016

fyi I got this error when using ReactRouter.History.hashHistory

switching to ReactRouter.browserHistory or ReactRouter.hashHistory fixed it

an old "solution" was to make sure that you don't have an old (1.x) version of the History module

jasonswearingen commented Oct 12, 2016

fyi I got this error when using ReactRouter.History.hashHistory

switching to ReactRouter.browserHistory or ReactRouter.hashHistory fixed it

an old "solution" was to make sure that you don't have an old (1.x) version of the History module

@kyleshevlin

This comment has been minimized.

Show comment
Hide comment
@kyleshevlin

kyleshevlin Oct 27, 2016

I've got the same issue. I believe this is a universal rendering issue, but I could be wrong. The various StackOverflow answers to this problem have not been terribly helpful thus far. While this might not be a bug, I think it could be useful to have documentation regarding how to use (or that you can't use) react-router-redux in a universally rendered application.

kyleshevlin commented Oct 27, 2016

I've got the same issue. I believe this is a universal rendering issue, but I could be wrong. The various StackOverflow answers to this problem have not been terribly helpful thus far. While this might not be a bug, I think it could be useful to have documentation regarding how to use (or that you can't use) react-router-redux in a universally rendered application.

@jamieallen59

This comment has been minimized.

Show comment
Hide comment
@jamieallen59

jamieallen59 Dec 2, 2016

Just incase it helps anyone else with an isomorphic app, wrapping history.listen in an if block that checks if the code is running on the client works well:

const isClient = () => (
	typeof window !== 'undefined' && window.document;
);

if (isClient()) {
	const history = syncHistoryWithStore(browserHistory, store);

	history.listen(location => {
             // do stuff
	});
}

jamieallen59 commented Dec 2, 2016

Just incase it helps anyone else with an isomorphic app, wrapping history.listen in an if block that checks if the code is running on the client works well:

const isClient = () => (
	typeof window !== 'undefined' && window.document;
);

if (isClient()) {
	const history = syncHistoryWithStore(browserHistory, store);

	history.listen(location => {
             // do stuff
	});
}
@advance512

This comment has been minimized.

Show comment
Hide comment
@advance512

advance512 Mar 11, 2017

I had this issue too.

Just deleted node_models and reinstalled everything from scratch - fixed it.
I guess the issue was a clash between the history in my dependencies and in the deps of react-router.

advance512 commented Mar 11, 2017

I had this issue too.

Just deleted node_models and reinstalled everything from scratch - fixed it.
I guess the issue was a clash between the history in my dependencies and in the deps of react-router.

@eldyvoon

This comment has been minimized.

Show comment
Hide comment
@eldyvoon

eldyvoon Mar 12, 2017

had the same problem.

    "react-router": "^4.0.0"
    "react-router-redux": "^4.0.8"

eldyvoon commented Mar 12, 2017

had the same problem.

    "react-router": "^4.0.0"
    "react-router-redux": "^4.0.8"
@Isarstyle

This comment has been minimized.

Show comment
Hide comment
@Isarstyle

Isarstyle Mar 13, 2017

it is working with this Combination:
"react-router": "^3.0.2", "react-router-redux": "^4.0.8",

Isarstyle commented Mar 13, 2017

it is working with this Combination:
"react-router": "^3.0.2", "react-router-redux": "^4.0.8",

@advance512

This comment has been minimized.

Show comment
Hide comment
@advance512

advance512 Mar 13, 2017

You can also use the latest react-router-redux@^5.0.0 and react-router@^4.0.0, but it means you'll never to modify your usage a bit - using Switch, ConnectedRouter etc.

advance512 commented Mar 13, 2017

You can also use the latest react-router-redux@^5.0.0 and react-router@^4.0.0, but it means you'll never to modify your usage a bit - using Switch, ConnectedRouter etc.

@leftdevel

This comment has been minimized.

Show comment
Hide comment
@leftdevel

leftdevel Mar 15, 2017

You can fix it by importing createBrowserHistory from 'history':

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

leftdevel commented Mar 15, 2017

You can fix it by importing createBrowserHistory from 'history':

import { createBrowserHistory } from 'history';
const store = createStore(...);
const history = syncHistoryWithStore(createBrowserHistory(), store);
@mattfaircliff

This comment has been minimized.

Show comment
Hide comment
@mattfaircliff

mattfaircliff Mar 16, 2017

Had this problem as well. Seems as though react-router 4.0.0 throws it when used with react-router-redux 4.0.8. Downgraded to react-router 3.0.2 and all works 100%.

mattfaircliff commented Mar 16, 2017

Had this problem as well. Seems as though react-router 4.0.0 throws it when used with react-router-redux 4.0.8. Downgraded to react-router 3.0.2 and all works 100%.

@reactjs reactjs locked and limited conversation to collaborators Mar 17, 2017

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.