React-Router-Redux: export 'syncHistoryWithStore' was not found in 'react-router-redux'

Question

I've been trying to integrate Redux into my application, and am experiencing an issue using React-Router-Redux 5.0.0-alpha.6

I receive error: "export 'syncHistoryWithStore' was not found in 'react-router-redux'. The official guides say to import syncHistoryWithStore, which I have done: https://github.com/reactjs/react-router-redux

I've also looked inside the react-router-redux package and there doesn't seem to be any sign of syncHistoryWithStore.

What am I missing?

Here's my index.js. Redux is working, but I wasn't able to push a new route with just ConnectedRouter and apparently that's due to the browserHistory thing.

import React from 'react';
import { render } from 'react-dom'
import { Provider } from 'react-redux';
import { Route } from 'react-router'
import { ConnectedRouter, routerReducer, routerMiddleware, syncHistoryWithStore, push } from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'

const store = configure();
const history = syncHistoryWithStore(createBrowserHistory(), store);

const navigation = (
  <Provider store={store}>
      <ConnectedRouter history={history}>
          <SystemManager>
            <div>
            <Route path="/" component={Dashboard}/>
            <Route path="/dashboard" component={Dashboard} />
            .....

            <Route component={NotFound} />
            </div>
          </SystemManager>
      </ConnectedRouter>
    </Provider>
);
injectTapEventPlugin();

render(navigation, document.getElementById('app'));

Package versions:

react-redux: "^5.0.4",
react-router: "^4.1.1",
react-router-dom: "^4.1.1",
react-router-redux: "^5.0.0-alpha.6",

Sorry I realised I forgot that info as soon as you commented. Just added it to the original post. — user5156141
cool, so i think you're looking at the documentation/example from the current version and not the alpha you're using, i don't see any mention of that function here -> github.com/ReactTraining/react-router/tree/master/packages/… — aw04
It's confusing, because NPM shows the version to be 4.0.8, yet it's forcefully downloading 5.0.0. I don't even want the alpha. How can I specify to get the stable version if npm is downloading the alpha? — user5156141
well i think you need the alpha to use with the current version of react router (which you are using). yes it is confusing, the react ecosystem moves really fast which means some pieces outpace others :) — aw04

user5156141 user5156141 · Accepted Answer · 2017-09-01T16:43:24

For anyone experiencing the same issue, i'll post my working index.js file (note: i've left my custom components and reducers in for further guidance).

I am not using syncHistoryWithStore now. I use plugin history/createBrowserHistory and create a history for the ConnectedRouter. Everything seems to be working so far..

I use Redux DevTools and have also used node environments to switch between dev and prod mode.

Obviously no warranty provided.

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers, applyMiddleware, compose } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';

import { Provider } from 'react-redux'

import createHistory from 'history/createBrowserHistory'
import { Route, Switch } from 'react-router'

import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux'
import injectTapEventPlugin from 'react-tap-event-plugin';

import menu from './reducers/menu';
import permissions from './reducers/permissions';
import sitePreferences from './reducers/sitePreferences';
import user from './reducers/user';


// Custom Page Container Imports (these are the visual layout components)
import SystemManager from './containers/systemManager/systemManager';

import LoginPage from './containers/pages/login-page/';
import NotFound from './containers/pages/not-found/not-found';

// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory()

// Build the middleware for intercepting and dispatching navigation actions
const middleware = routerMiddleware(history)

const isProduction = process.env.NODE_ENV === 'PRODUCTION';

// = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
// Redux: Store creation and middleware application based on production/development mode
// = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
let store = null;

if (isProduction === true) {
  store = createStore(
    combineReducers({
        menu,
        permissions,
        sitePreferences,
        user,
        routerReducer
      }),
  compose(applyMiddleware(middleware))
);

} else {

  store = createStore(
    combineReducers({
        menu,
        permissions,
        sitePreferences,
        user,
        routerReducer
      }),
  composeWithDevTools(applyMiddleware(middleware))
);

}
injectTapEventPlugin(); // Material UI

ReactDOM.render(
  <Provider store={store}>
    { /* ConnectedRouter will use the store from Provider automatically */ }
    <ConnectedRouter history={history}>
      <SystemManager>
        <Switch>
          <Route path="/dashboard" component={NotFound} />
          <Route path="/login" component={LoginPage} />
        </Switch>
      </ SystemManager>

    </ConnectedRouter>
  </Provider>,
  document.getElementById('app')
)

React-Router-Redux: export 'syncHistoryWithStore' was not found in 'react-router-redux'

1 Answers