react-router: ConnectedRouter is undefined

Version

react-router-redux 4.0.8

Test Case

Steps to reproduce

Follow the react-router-redux example: https://github.com/reacttraining/react-router/tree/master/packages/react-router-redux

Expected Behavior

A Router component which is connected to the store

Actual Behavior

ConnectedRouter is always undefined

Code example

index.js

import React from 'react';
import ReactDom from 'react-dom';
import { Provider } from 'react-redux';
import {
  // BrowserRouter as Router,
  Route,
} from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import { ConnectedRouter } from 'react-router-redux';

// Styles
import 'sanitize.css/sanitize.css';
import './global-styles';

import configureStore from './store';
import rootSaga from './rootSaga';
import App from 'containers/App';


const rootElement = document.getElementById('root');
const initialState = {};
const history = createHistory();
const store = configureStore(initialState, history);

// Run rootSaga
store.runSaga(rootSaga);

ReactDom.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Route path="/" component={App} />
    </ConnectedRouter>
  </Provider>,
  rootElement
);

store.js

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import createSagaMiddleWare from 'redux-saga';
import promise from 'redux-promise';
import { routerMiddleware } from 'react-router-redux';

import rootReducer from './rootReducer';


export default function configureStore(initialState, history) {
  const sagaMiddleWare = createSagaMiddleWare();
  const routerMW = routerMiddleware(history);
  const middleWares = [
    routerMW,
    promise,
    sagaMiddleWare,
  ];

  const enhancers = [
    applyMiddleware(...middleWares)
  ];

  const composeEnhancers =
    process.env.NODE_ENV !== 'production' &&
    typeof window === 'object' &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;

  const store = createStore(
    rootReducer,
    initialState,
    composeEnhancers(...enhancers),
  );

  store.runSaga = sagaMiddleWare.run;

  return store;
}

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 14
  • Comments: 22 (5 by maintainers)

Most upvoted comments

5.0.0-alpha.2 is up on the next tag: npm install react-router-redux@next Sorry about that!

It’s not in 4.0.8. That’s a 5.0 feature, which is in alpha.

+1 here, fresh create-react-app application, if I import ‘react-router-redux’ it can’t find anything, and if I import ‘react-router-redux/es’ browser says “Unexpected token import”, because imported ES6 doesn’t get transpiled.

5.0.0 alpha contains just package.json and README.md. Shouldn’t there be something else as well?

@valstu have you tried importing them from react-router-redux/es?

Weird, i’m still getting following error:

Error in ./~/react-router-redux/index.js
Module not found: ./actions in /Users/username/project_folder/node_modules/react-router-redux

Error in ./~/react-router-redux/index.js
Module not found: ./middleware in /Users/username/project_folder/node_modules/react-router-redux