React + Redux + Babel (SyntaxError in ...state unexpected token)

Question

i try to repeat the example: https://github.com/reduxjs/redux/tree/master/examples/async/src

But i use last versions of React, Redux and Babel (in example was React v15.5). I don't change anything in this example, and then i try to build it with webpack i get SyntaxError here:

  22 |     case INVALIDATE_SUBREDDIT:
  23 |       return {
> 24 |         ...state,
     |         ^
  25 |         didInvalidate: true
  26 |       }

In the ./reducers/index.js

const posts = (state = {
  isFetching: false,
  didInvalidate: false,
  items: []
}, action) => {
  switch (action.type) {
    case INVALIDATE_SUBREDDIT:
      return {
        ...state,
        didInvalidate: true
      }
    case REQUEST_POSTS:
      return {
        ...state,
        isFetching: true,
        didInvalidate: false
      }
    case RECEIVE_POSTS:
      return {
        ...state,
        isFetching: false,
        didInvalidate: false,
        items: action.posts,
        lastUpdated: action.receivedAt
      }
    default:
      return state
  }
}

What is wrong here?

UPDATE:

After AdityaParab answer i make:

npm install --save-dev babel-preset-stage-3

And in your .babelrc

{
    "presets": ["env", "stage-3", "react"]
}

Last error disappeared, but i take one more in ./containers/App.js:

  19 |   }
  20 |
> 21 |   handleChange = nextSubreddit => {
     |                ^
  22 |     this.props.dispatch(selectSubreddit(nextSubreddit))
  23 |   }
  24 |

UPDATE 2:

Works fine with it.

{
    "presets": ["env", "stage-3", "react"],
    "plugins": ["transform-object-rest-spread", "transform-decorators-legacy", "transform-class-properties"]
}

Thanks all for advice!

do you have `.babelrc`? Or you pass configuration to babel via command line? — AdityaParab, Sep 06 '18 at 11:39
{ "presets": ["env", "react", "stage-1"], "plugins": ["transform-decorators-legacy", "transform-runtime"] } — Michael Ploeckinger, Sep 06 '18 at 11:42
use https://babeljs.io/docs/en/babel-preset-stage-3/ or https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread.html , for better understanding of presets, plugins check this too https://stackoverflow.com/a/48516794/4061006 — Jayavel, Sep 06 '18 at 11:47

score 1 · Accepted Answer · answered Sep 06 '18 at 11:47

1

Problem with the preset

first

npm install --save-dev babel-preset-stage-3

And in your .babelrc

{
    "presets": ["env", "stage-3", "react"]
}

answered Sep 06 '18 at 11:47

AdityaParab

7,024
3
27
40

it is help, but now another error, i think i need some plagin, not only stage-3 – Denis Ross Sep 06 '18 at 11:54
this proposal is stage 4 https://github.com/tc39/proposal-object-rest-spread and the correct transform is https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread.html – adz5A Sep 06 '18 at 11:54
@DenisRoss can you share the error you are getting? – AdityaParab Sep 06 '18 at 18:14
nvm.. I checked updated question. Yes you'd need `transform-class-properties"` for that arrow function syntax to work on arrow function class properties. – AdityaParab Sep 06 '18 at 18:15

score -2 · Answer 2 · answered Sep 06 '18 at 11:39

-2

you are going to concatenation object, so you should follow ES6 syntax.

you current syntax is wrong.

return {
    ...state,
    didInvalidate: true
  }

should be like this

return {
    ...state,
    ...{ didInvalidate: true }
  }

replace it at all case and then try again.

answered Sep 06 '18 at 11:39

Arif Rathod

578
2
13

1

Your syntax would evaluate to exactly the same. The OP syntax is fine. – cgdannie Sep 06 '18 at 11:42
Yes. I see no problem with the syntax for this case. What you're saying is correct for nested objects. But this isn't one of those. – AdityaParab Sep 06 '18 at 11:44

React + Redux + Babel (SyntaxError in ...state unexpected token)

2 Answers2