React-router: Uncaught TypeError: Cannot read property 'func' of undefined

Question

I am trying to run my react application but I am getting this error in browser console saying

Uncaught TypeError: Cannot read property 'func' of undefined
    at Object../node_modules/react-router/lib/InternalPropTypes.js (InternalPropTypes.js:9)
    at __webpack_require__ (bootstrap 5dff8855fa9b2c3ef6c2:678)
    at fn (bootstrap 5dff8855fa9b2c3ef6c2:88)
    at Object../node_modules/react-router/lib/Router.js (Router.js:27)
    at __webpack_require__ (bootstrap 5dff8855fa9b2c3ef6c2:678)
    at fn (bootstrap 5dff8855fa9b2c3ef6c2:88)
    at Object../src/index.js (index.css?f255:26)
    at __webpack_require__ (bootstrap 5dff8855fa9b2c3ef6c2:678)
    at fn (bootstrap 5dff8855fa9b2c3ef6c2:88)
    at Object.0 (rootReducer.js:13)
    at __webpack_require__ (bootstrap 5dff8855fa9b2c3ef6c2:678)
    at ./node_modules/ansi-regex/index.js.module.exports (bootstrap 5dff8855fa9b2c3ef6c2:724)
    at bootstrap 5dff8855fa9b2c3ef6c2:724

I have checked my index.js, store.js and routes.js but couldn't find the problem. Here are all the three js files

index.js

import _ from 'lodash'
import React    from 'react'
import ReactDOM from 'react-dom'

import Promise from 'bluebird'

import createHistory  from 'history/lib/createBrowserHistory'
import Router from 'react-router/lib/Router'
import RouterContext from 'react-router/lib/RouterContext'
import match  from 'react-router/lib/match'
import useRouterHistory from 'react-router/lib/useRouterHistory'
// import injectTapEventPlugin from 'react-tap-event-plugin';

import { syncHistoryWithStore } from 'react-router-redux'

import configureStore, { loadState, saveState, storageSupported } from './store'

import getRoutes from './routes'

import Root from './Container/Root'

import $ from 'jquery'
import './index.css';
import registerServiceWorker from './registerServiceWorker';
var debug = require('debug')('tessact:client')

window.Promise = Promise;
window.$ = window.jQuery = $;


var browserHistory = useRouterHistory(createHistory)({
    queryKey: false,
    basename: '/'
});

var savedState = loadState()
var initialState = _.merge(window.INITIAL_STATE || {}, savedState)

var store   = configureStore(initialState, browserHistory);
var routes  = getRoutes(store);
var history = syncHistoryWithStore(browserHistory, store, {
    selectLocationState: (state) => state.router
});


const SKIP_PERSIST_KEYS = ['router']    // Do not get saved to localStorage
if (storageSupported()){
    window.localStorage.debug = 'chqbook:*';
    store.subscribe(_.throttle(()=> {
        debug('Persisting data to store.')
        var data = store.getState();
        saveState( _.omit(data, ...SKIP_PERSIST_KEYS) )
    }, 2000))
}


const ROOT_CONTAINER = document.getElementById('root');
const onRenderComplete = ()=> {
    console.timeEnd('render');
}

window.localStorage.debug = 'tessact:*'
window._History = history



ReactDOM.render(
        <Root store={store}>
                <Router history={history}>
                    {routes}
                </Router>
        </Root>,
    ROOT_CONTAINER,
    onRenderComplete
)
registerServiceWorker();

store/index.js

import {compose, createStore, applyMiddleware} from 'redux'
import thunk    from 'redux-thunk'
import { routerMiddleware } from 'react-router-redux'
import rootReducer from './rootReducer'

export function storageSupported(){
    var testKey = 'ls-test';
    try {
        window.localStorage.setItem('ls-test', '1');
        window.localStorage.removeItem('ls-test');
        return true
    } catch (err){
        return false
    }
}

export function saveState(state){
    try {
        var serialized = JSON.stringify(state)
        localStorage.setItem('state', serialized)
    } catch (err){
        return undefined
    }
}

export function loadState(state){
    console.log('Loading persisted state...')
    try{
        var serialized = localStorage.getItem('state')
        if (serialized === null){
            return undefined
        }
        return JSON.parse(serialized)
    } catch (err){
        return undefined
    }
}


export default function configureStore(INITIAL_STATE={}, history){

    var middlewares = [
        applyMiddleware(thunk, routerMiddleware(history))
    ];



    var store = createStore(
        rootReducer,
        INITIAL_STATE,
        compose(...middlewares)
    );


    if (module.hot) {
        module.hot.accept('./rootReducer', () => {
            const nextRootReducer = require('./rootReducer').default;
            store.replaceReducer(nextRootReducer);
        });
    }

    return store;
};

and routes.js

import Route         from 'react-router/lib/Route'
import React    from 'react'
import Router from 'react-router/lib/Router'
import Redirect      from 'react-router/lib/Redirect'
import IndexRedirect from 'react-router/lib/IndexRedirect'
import IndexRoute    from 'react-router/lib/IndexRoute'
import {browserHistory} from 'react-router'
import App from './Container/App/App'
import LoginPage from './Pages/LoginPage'
import SideBar from './Components/Sidebar'

const debug = require('debug')('tessact:client-router');

function authorize(){
    console.log('inside')
    if(window.localStorage.token == undefined) {

        browserHistory.push('/')
    }
}

function getRoutes(store) {

    function hasAuth(nextState, replace, callback){
        const state = store.getState();
        const valid = !!state.tokenReducer.token;

        debug('AUTH: ', valid)

        if (valid){
            console.log("I am inside client routes line 44")
            debug('AUTH: Bailing. Already Valid.')
            return callback()
        }
        replace('/login')
        debug('AUTH: To Login')
        callback();
    }

    return (
        <Route path='/' component={App}>
            <Route path='/login' component={LoginPage}/>
            <Route path='/app'>
                <Route component={SideBar}></Route>
                <Redirect from='*' to='/'/>
            </Route>
            <IndexRedirect to='/app'/>
            <Redirect from='*' to='/app'/>
        </Route>
    )
}

export default getRoutes;

I have looked into few threads which suggested there might be an issue with history.I couldn't get to the problem but. How can I solve it?

Answer 1

Have you tried to use react-router-dom?

https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

    import { BrowserRouter, Route, Switch } from 'react-router-dom';

    <BrowserRouter>
      <div>
        <Switch>
          <Route path='/login' component={LoginPage}/>
          <Route path='/app' component={SideBar}/>
          <Route path='/' component={App}/>
          ...etc
        </Switch>
      </div>
   </BrowserRouter>