React-redux error when webpack: SyntaxError: Unexpected token

Question

Here is a strange problem, here is the code:

...
const PrivateRoute = ({status, component: Component, ...rest}) => (
    <Route {...rest} render={ props => (
      status ?
        (<Component {...props}/>) :
        (<Redirect to="/login"/>)
    )}/>
)

function mapStateToProps(state) {
  return {
    status: state.user.status
}

export default connect(mapStateToProps)(PrivateRoute)

The error when doing webpack -d -w:

ERROR in ./public/javascripts/src/admin/components/PrivateRoute.jsx
Module build failed: SyntaxError: Unexpected token (4:53)

  2 | import { Route, Redirect } from 'react-router-dom'
  3 | 
> 4 | const PrivateRoute = ({status, component: Component, ...rest}) => (
    |                                                      ^
  5 |   <Route {...rest} render={ props => (
  6 |     status ?
  7 |       (<Component {...props}/>) :

The code is just follow the tutorial over here. However, the code blow also uses the '...' in Route {...rest}. When I remove the first '...', the second and third doesn't produce the error. Why does that happen?

Yury Tarabanko · Accepted Answer · 2017-06-23 08:08:44Z

2

This is experimental syntax. You need to include object-rest-spread plugin in your babel config. Or use a preset that includes this plugin. For example stage-3

As of this

When I remove the first '...', the second and third doesn't produce the error. Why does that happen?

<Route {...rest} is handled by jsx plugin included into react preset. Repl.

answered Jun 23, 2017 at 8:08

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

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

1 Comment

Yury Tarabanko Over a year ago

No problem. Glad I could help :)

Wei Bangtuo · Accepted Answer · 2018-04-19 05:29:29Z

0

Update you .eslintrc.js, set experimentalObjectRestSpread to ecmaFeatures as true.

parserOptions: {
  ecmaVersion: 7,
  sourceType: 'module',
  ecmaFeatures: {
    jsx: true,
    experimentalObjectRestSpread: true
  }
}

See https://eslint.org/docs/rules/rest-spread-spacing

edited Apr 19, 2018 at 5:29

answered Apr 18, 2018 at 14:53

Wei Bangtuo

611 silver badge7 bronze badges

Collectives™ on Stack Overflow

React-redux error when webpack: SyntaxError: Unexpected token

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related