spread operator not working in javascript object notation

Question

I am learning to use es6 in one of my react project and apply new spread operator ... this is working fine when using array [] ( as spread operator) syntax but failed when using inside object {} ( as rest properties) i.e. not assigning value just modifying.

Are these both are two completely different things? here are my system detail

node v 6.11.4
babel-core v 6.26.0
macOS Sierra v 10.12.6
Sublime Text 3 build 3143

/*eslint no-unused-vars:0 */

let alpha = ['a','b','c', {first: 'first'}];
let beta = ['be', 'ta', { first: 'second'}];

let more = {text:'more', date: new Date()};

const gamma = [...alpha, more]; // this is working fine 

console.log(gamma, alpha);

let todos = [{id: 1, completed: false}, {id:2, completed: true}];

const noCurlyFatArrow = () => {
                            return todos.map(todo =>
                                (todo.id === action.index)
                                ? {...todo, completed: !todo.completed }
                                : todo
                            )
                    };
noCurlyFatArrow();

and run the JS Build System in the sublime text (⌘ + B) and it gives following error in the console

  /opt/rqt/src/react-only/spread.js:1

  ? {...todo, completed: !todo.completed }  

     ^^^ 

  SyntaxError: Unexpected token ...

Also made few changes in .babelrc filr from this issue dicussion but no luck.

.babelrc

{
    "presets": ["es2015", "stage-3", "react"], //
    "plugins": ["transform-es2015-destructuring", "transform-object-rest-spread"]
}

tried without "stage" and with "stage-0" as well.

package.json

{
  "name": "rqt",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jquery": "^3.2.1",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-scripts": "1.0.14",
    "redux": "^3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.3",
    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "eslint": "^4.10.0",
    "eslint-config-airbnb": "^16.0.0",
    "eslint-config-react-app": "^2.0.1",
    "eslint-plugin-flowtype": "^2.39.1",
    "eslint-plugin-html": "^4.0.0-alpha.1",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.4.0"
  }
}

Using rest/spread in *object literals* is not valid ES6 syntax — Bergi, Nov 02 '17 at 12:06
but react guys are using in [example](https://github.com/reactjs/redux/blob/master/examples/todos/src/reducers/todos.js) — xkeshav, Nov 02 '17 at 12:07
@Bergi they're using the transform-object-rest-spread plugin, I don't think that's what the problem is here. — James Donnelly, Nov 02 '17 at 12:14
I have already installed `transform-object-rest-spread` plugin and added in .babelrc but its not working. — xkeshav, Nov 02 '17 at 12:24
[`...` is not an operator!](https://stackoverflow.com/a/37152508/218196) — Felix Kling, Nov 02 '17 at 15:48
Thank you for valuable link @FelixKling I was also confused what to call. now get some understanding — xkeshav, Nov 02 '17 at 17:05

score 0 · Answer 1 · answered Nov 02 '17 at 14:41

0

Try running npm run start from the command line in the project root directory. I don't think sublime is transpiling your code.

answered Nov 02 '17 at 14:41

Alex

5,364
9
54
69

score 0 · Accepted Answer · answered Nov 02 '17 at 18:57

solved the issue by doing various plugin installation but here is the summary

create new sublime text 3 build system for es6 with following code

 {
   "cmd": ["/Users/keshav.m/.nvm/versions/node/v6.11.4/bin/babel-node $file"],
   "shell": true,
   "selector": "*.js"
}

Note: I have installed node using nvm , so set complete path ( someone please tell how to add path without using complete path in sublime) of babel-node

installed babel-preset-es2015 globally and locally too
```
npm install --save-dev -g babel-preset-es2015
```

Note: during installation, npm warn

npm WARN deprecated babel-preset-es2015@6.24.1: Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

( this is really frustrating thing by node and don't know how it affect)

also run nvm alias default node do not know whether it helps or not.
now select this build system and run the code. it works fine now.

update .babelrc file

  {
    "presets": ["es2015", "react"],
    "plugins": ["transform-es2015-destructuring", "transform-object-rest-spread"]
  }

updated package.json file

 {
  "name": "rqt",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jquery": "^3.2.1",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-scripts": "1.0.14",
    "redux": "^3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.3",
    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "eslint": "^4.10.0",
    "eslint-config-airbnb": "^16.0.0",
    "eslint-config-react-app": "^2.0.1",
    "eslint-plugin-flowtype": "^2.39.1",
    "eslint-plugin-html": "^4.0.0-alpha.1",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.4.0"
  }
}

note: also install "eslint-plugin-jsx-a11y" , it was asking for peer dependency.

hope it help someone.

spread operator not working in javascript object notation

.babelrc

package.json

2 Answers2