Cannot read property 'push' of undefined(…)

[subodhpareek18]

Here is my store.js calling the routerMiddleware

// tooling modules
import { applyMiddleware, createStore, compose } from 'redux'
import { routerMiddleware } from 'react-router-redux'
import { browserHistory } from 'history'
import thunk from 'redux-thunk'
import promise from 'redux-promise-middleware'
import logger from 'redux-logger'

// rootReducer
import rootReducer from '../reducers'

// middleware
const middleware = applyMiddleware(
  thunk,
  promise(),
  logger(),
  routerMiddleware(browserHistory),
)

// default export
export default createStore(rootReducer, compose(
  middleware,
  window.devToolsExtension ? window.devToolsExtension() : f => f
));

Here is my main.js performing syncHistoryWithStore

// tooling modules
import React from 'react'
import { render as mount } from 'react-dom'
import { Provider } from 'react-redux'
import { Router, Route, browserHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'

// components
import Auth from './components/Auth'
import App from './components/App'

// styles
import styles from './styles.less'

// store
import store from './store'

// sync store and routing history
const history = syncHistoryWithStore(browserHistory, store)

// mounting
const root = document.getElementById('root')
mount(
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={Auth}></Route>
        <Route path="/app(/:view)" component={App}></Route>
    </Router>
  </Provider>
,root)

Here is my rootReducer applying the routerReducer

// tooling modules
import { combineReducers } from 'redux'
import { routerReducer as routing } from 'react-router-redux'

// reducers
import auth from './auth'

// combine and export reducers
export default combineReducers({
  routing,
  auth,
})

Here is my App.js component calling and firing push

// tooling modules
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { push } from 'react-router-redux'

// connect to store
@connect((state) => {
  return {
    isAuthenticated: state.auth.isAuthenticated
  }
})

export default class App extends Component {
  componentWillMount() {
    if (!this.props.isAuthenticated) {
      this.props.dispatch(push('/'))
    }
  }
  render() {
    return (
      <h1>bye world!</h1>
    )
  }
}

Now the action gets dispatched with this error:

Have tried few variations in the code and tried calling the push method on different places, but to no avail.

[timdorr]

import { browserHistory } from 'history' This should be importing from react-router.

[subodhpareek18]

Haha that was a much smaller change then what I was expecting. Thanks @timdorr.

[Jekshmek]

├─┬ react-router@4.2.0
├─┬ react-router-dom@4.2.2
│ ├── react-router@4.2.0 deduped
├── react-router-redux@4.0.8

import { browserHistory } from 'react-router'

browserHistory.push(...

Uncaught TypeError: Cannot read property 'push' of undefined !!!!!!!!!!!!!!!!!!!!!!!!!!!

[timdorr]

@Jekshmek You're using the wrong version of react-router. This version is for react-router v2/3.