react-router-redux: Module build failed: SyntaxError: Unexpected token ...reducers

Question

//app.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import createHistory from 'history/createBrowserHistory';
import { Route } from 'react-router';

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

import App from './components/app.js';
import reducers from './reducers';

const history = createHistory();
const middleware = routerMiddleware(history);

// Add the reducer to your store on the `router` key
// Also apply our middleware for navigating
const store = createStore({
    ...reducers,
    router: routerReducer
  },
  applyMiddleware(middleware)
);

const About = () => {
  return (<div>
    Will this work?
  </div>);
}

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <Route exact path="/" component={App}/>
        <Route path="/about" component={About}/>
      </div>
    </ConnectedRouter>
  </Provider>
  , document.querySelector('#app'));

Here is my reducers/index.js code.

//reducers/index.js
import { combineReducers } from 'redux';
import { mobileLinks } from './reducer_header';
import UserDetailsReducer from './reducer_user_details';

const rootReducer = combineReducers({
  mobileLinks,
  userDetails: UserDetailsReducer
});

export default rootReducer;

What do I do to fix this? I'm unable to find any examples for the new version of react-router-redux. I've tried moving the routerReducer to reducers/index.js but that didn't work either. Can someone please help?

megaboy101 · Accepted Answer · 2017-03-26 00:38:53Z

3

Most likely you do not have Babel set to transpile the Object Spread Operator, you can read up on it here.

You can simply install the Babel "Object rest spread transform" preset like so: npm install --save-dev babel-plugin-transform-object-rest-spread

And add it to your list of plugins:

{
    "plugins": [
        // Other plugins...
        "transform-object-rest-spread"
    ]
}

answered Mar 26, 2017 at 0:38

megaboy101

914 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arthur Over a year ago

Thanks! I did not know the solution was this simple!

Collectives™ on Stack Overflow

react-router-redux: Module build failed: SyntaxError: Unexpected token ...reducers

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related