React-router: ConnectedRouter is undefined

[on3iro]

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;
}

[timdorr]

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

[valstu]

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

[timdorr]

Huh, that's weird. Perhaps a bad push? I'll get that fixed up.

[timdorr]

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

[oxyno-zeta]

Yes it's working !! Thanks !!

[valstu]

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

[valstu]

Started completely new app with create-react-app and the problem above still occurs. Seems like those files ./middleware.js & ./actions.js are missing from the npm package root folder if I compare it to this package https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux

[valstu]

@timdorr Seems like the react-router-redux package.json is missing middleware.js and actions.js from the files array and won't be published to NPM?

https://github.com/ReactTraining/react-router/blob/22bd52c901ef0312348c2b02549c7102bd5653ae/packages/react-router-redux/package.json#L10-L17

[iwyg]

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

[valstu]

@iwyg Yeah, then I get Uncaught SyntaxError: Unexpected token import

[ekalinichev]

+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.

[iwyg]

@valstu @ekalinichev that's interesting bc that's the only way I got it to work.

[ekalinichev]

Maybe you have extra babel settings in addition to what create-react-app provides?

On 13 Mar 2017, at 08:24, Thomas Appel [e-mail] wrote:

@valstu @ekalinichev that's interesting bc that's the only way I got it to work.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[iwyg]

@ekalinichev Maybe. I m using a custom setup with webpack 2, so no create-react-app settings.

[srosset81]

I get the same error messages as @valstu and @ekalinichev

[timdorr]

Those files are also missing from the package. Sorry about that. An alpha 3 is coming soon.

[ekalinichev]

@valstu @srosset81 I just installed version 5.0.0-alpha.3 and it worked for me, with just

import { ConnectedRouter } from 'react-router-redux';

[remy]

It seems like 5.0.0-alpha.9 isn't exporting ConnectedRouter again. Certainly if I import it and log it out, it's undefined.

[timdorr]

@remy Nope, it's there: https://unpkg.com/[email protected]/es/index.js Check your import statement, as you have something wrong.

[remy]

Maybe I'm going a bit loopy, but this is my import:

import {
  ConnectedRouter,
  routerReducer,
  routerMiddleware,
} from 'react-router-redux';

(could be code blindness!)

[remy]

Okay, no idea what's going on. I installed @next looked like it didn't work, I installed @latest - still didn't work (all undefined) reinstalled @next and the same code is working. 🤪 Well, ignore me then :)

[yurikilian]

@remy same here. It worked when I used @next. Maybe you forgot to do: watchman watch-del-all && npm start --reset-cache