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, May 01 '17 at 15:09
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 -> https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux — aw04, May 01 '17 at 15:12
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, May 01 '17 at 15:14
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, May 01 '17 at 15:16
It really is hard to keep up. I didn't even realise that dependency issue with react router. Can you suggest a known-stable version for these packages that I can fix in my package.json? I just need to be able to use history in the store! — user5156141, May 01 '17 at 15:19
if it was me, i would stick with exactly what you have but just use the link i provided above for how to use react-router-redux. your other option would be to go back on react-router version and react-router-redux version to get stability, assuming that doesn't cause any compatibility issues with anything else — aw04, May 01 '17 at 15:22
i've used that same setup (with the alpha) and it worked fine, for what it's worth — aw04, May 01 '17 at 15:23
Just amended my project to follow that. It's now running! Thank you. — user5156141, May 01 '17 at 15:28
Only thing I am now struggling is to how to programmatically change the route. This.props.history.push(routePath) doesn't work now. Back to the docs! — user5156141, May 01 '17 at 15:28
check out withRouter HOC in the docs, it allows you to get history in props — aw04, May 01 '17 at 15:33
Seriously thank you for your guidance @aw04, all up and running! — user5156141, May 01 '17 at 15:43

score 4 · Answer 1 · edited Aug 22 '18 at 18:25

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')
)

This works with: react-redux: "^5.0.4", react-router: "^4.1.1", react-router-dom: "^4.1.1", react-router-redux: "^5.0.0-alpha.6", (and newer) — user5156141, Apr 28 '18 at 06:42

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

1 Answers1