Use of spread operator (...) with React and Redux

Question

I am building a react app with Redux. I have a 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

When I build with Webpack, I get:

Module build failed: SyntaxError: Unexpected token (x:y)

Which points to ....

Any idea? What am I doing wrong?

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"
  }
}

Could you include your webpack.config.json and package.json? — Aurora0001
– Aurora0001, Commented Nov 21, 2016 at 20:12
By the way, the 'three dots' are called the 'spread operator'. — matmo
– matmo, Commented Nov 21, 2016 at 20:31

U r s u s · Accepted Answer · 2016-11-21 20:29:01Z

2

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.

edited Nov 21, 2016 at 20:29

answered Nov 21, 2016 at 20:17

U r s u s

7,05812 gold badges54 silver badges88 bronze badges

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

4 Comments

Aurora0001 Over a year ago

Worth noting that you need to run npm install --save-dev babel-preset-stage-0 for this to work.

ArkadyB Over a year ago

Thanks! It worked. Could you please explain why stage-0 and not stage-2 for example (stage-2 worked as well...)?

Aurora0001 Over a year ago

@ArkadyB stage-3 would also work, because it contains transform-object-rest-spread. I assume this is personal preference as to why stage-0 was chosen.

U r s u s Over a year ago

I think they all contain the transform-object-rest-spread plugin, it's up to you to choose I think. Have a look here babeljs.io/docs/plugins/preset-stage-0

Collectives™ on Stack Overflow

Use of spread operator (...) with React and Redux

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related