ArkadyB ArkadyB - 11 days ago 26
React JSX Question

Use of three dots operator with react and redux

I am building react app with redux. Having reducer returning:

const posts = (state={posts:[], search_criterion:''}, action) => {
switch (action.type) {
case 'SOME_EVENT':
return {
...state,
search_criterion:action.search_criterion
}
default:
return state
}
}
export default posts


On webpack build i get:Module build failed: SyntaxError: Unexpected token (x:y), pointing to '...'.

Any idea? What am i doing wrong?

ADD1:
webpack.config.js

const webpack = require('webpack');

module.exports = {
context: __dirname + "/app",
entry: {
javascript: "./app.js"
// ,html: "./index.html",
},

output: {
filename: "app.js",
path: __dirname + "/server/js",
},

module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.html$/,
loader: "file?name=[name].[ext]",
},
],
},

//alient app settings settings
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('test'),
'APIHOST': JSON.stringify('http://localhost:8081'),
}
})
],
}


package.json

{
"name": "react-project",
"version": "1.0.0",
"description": "",
"main": "app.js",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./webpack.config.js",
"start": "NODE_ENV=test APIHOST=http://localhost:8081 babel-node server/server.js --presets es2015,stage-2"
},
"babel": {
"presets": [
"es2015",
"react"
]
},
"author": "",
"license": "ISC",
"devDependencies": {
"axios": "^0.15.2",
"babel": "^6.5.2",
"babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.18.0",
"body-parser": "^1.15.2",
"express": "^4.14.0",
"express-handlebars": "^3.0.0",
"express-session": "^1.14.2",
"file-loader": "^0.9.0",
"node-jsx": "^0.13.3",
"socket.io": "^1.5.1",
"uglify-js": "^2.7.4",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
},
"dependencies": {
"react": "^15.4.0",
"react-dom": "^15.4.0",
"react-redux": "^4.4.6",
"redux": "^3.6.0",
"redux-logger": "^2.7.4",
"redux-thunk": "^2.1.0"
}
}

Answer

In your package.json add stage-0 under react, like so:

"babel": {
    "presets": [
      "es2015",
      "react"
      "stage-0"
    ]
  },

Alternatively you could just add the transform-object-rest-spread plugin.

Comments