TheGabornator TheGabornator - 1 year ago 168
React JSX Question

Babel can't recognize ... in syntax. (Redux)

Babel can't convert the ... in my Redux reducer. I keep getting an error message when running Webpack with Babel:

ERROR in ./src/reducers/api_reducer.js
Module build failed: SyntaxError: Unexpected token (18:15)

16 | switch(action.type) {
17 | case FETCH_MESSAGE:
> 18 | return { ...state, message: action.payload };
| ^
19 | case FETCH_EVENTS:
20 | return { ...state, eventList: action.payload };
21 | case CREATE_EVENT:


These are my installed dependencies:

"devDependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.0",
"babel-preset-env": "^1.1.4",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.26.1",
"file-loader": "^1.1.4",
"html-webpack-plugin": "^2.30.1",
"image-webpack-loader": "^3.4.2",
"rimraf": "^2.6.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.9",
"webpack": "2.2.0-rc.0",
"webpack-dev-server": "^2.2.0-rc.0"
}


and my .babelrc goes like that:

{
"presets": ["babel-preset-env", "react"]
}


Could anyone tell me why the ... can't get transpiled? How did you solve this issue? -Thank you a lot!

Answer Source

Object rest/spread is a stage 3 proposal at the moment, so it's not included in babel-preset-env. You can either:

  • include only this specific transform with .babelrc:

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

  • include all stage 3 proposals with :

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download