CODEWITHSUNDEEP
reactjswebpackbabeljs
mylvinta
mylvinta

Reputation: 41

Webpack doesn't recognize ES6 spread syntax

Trying to test the ES6 Spread syntax, but webpack gives me an error.

package.json

"devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "webpack": "^1.12.13"
}

webpack.config.js

loaders: [
            {
                loader: 'babel-loader', 
                query: {
                    presets: ['react', 'latest']
                },
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/
            }
         ]

app.jsx (webpack entry file)

var objOne = {name: 'Jussi', location: 'Interwebs'};
var objTwo = {
    age: 28, 
    ...objOne
};

console

webpack
Hash: 2a82a67f90f9aa05ab4a
Version: webpack 1.12.13
Time: 1409ms
    + 1 hidden modules

ERROR in ./app/app.jsx
Module build failed: SyntaxError: Unexpected token (7:1)

   5 | var objTwo = {
   6 |  age: 28, 
>  7 |  ...objOne
     |  ^

This ellipsis notation should work, right? Where am I going wrong here?

Upvotes: 0

Views: 1286

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074158

This is not valid ES2015 (or ES2016) code:

var objOne = {name: 'Jussi', location: 'Interwebs'};
var objTwo = {
    age: 28, 
    ...objOne
};

It relies on object spread properties, which are a Stage 3 proposal (as of this writing in November 2016). (Array spread is part of ES2015, but not object spread.) That means that the feature is fully defined and well fleshed-out, and specification text is ready, but that it's waiting on implementations and implementation feedback. (Details in the process document.) So it's really far along and likely to make it into a spec soon (perhaps not ES2017, though it may still be possible depending on how far along implementations are, but almost certainly ES2018).

Babel and other similar transpilers will transpile it with the relevant option set (for instance, for Babel it's the stage-3 preset; example).

Upvotes: 4

Related Questions