Syntax error from spread attribute

Question

I am using yeoman generator react-webpack. I am trying to use spread attributes in the Main.js component:

require('normalize.css');
require('styles/App.css');

import React from 'react';

var FixedDataTable = require('fixed-data-table');

const TextCell = ({rowIndex, data, col, ...props}) => (
  <Cell {...props}>
    {data.getObjectAt(rowIndex)[col]}
  </Cell>
);

let yeomanImage = require('../images/yeoman.png');

class AppComponent extends React.Component {
  render() {
    return (
      <div className="index">
        <img src={yeomanImage} alt="Yeoman Generator" />
        <div className="notice">Please edit <code>src/components/Main.js</code> to get started!</div>
      </div>
    );
  }
}

AppComponent.defaultProps = {
};

export default AppComponent;

I keep getting this error:

ERROR in ./src/components/Main.js Module build failed: SyntaxError: C:/dev/react/reactwebpack/src/components/Main.js: Unexpected token (8:41)

let yeomanImage = require('../images/yeoman.png');
const ImageCell = ({rowIndex, data, col, ...props}) => (
<ExampleImage src={data.getObjectAt(rowIndex)[col]}/>);

at Parser.pp.raise (C:\dev\react\react-webpack\node_modules\babylon\index.js:1378:13)

What am I missing in the webpack or babel configs? (The config files are the same as the generator's).

Sergiu Paraschiv · Accepted Answer · 2016-03-29 14:47:33Z

4

That's an ES7 feature. You need the transform-object-rest-spread preset for babel.

The generator you are using is itself using this one. It comes with a .babelrc and that is the place you need to enable the extra plugin:

"plugins": ["...other plugin", "transform-object-rest-spread"]

It also needs to be npm installed and probably added to your package.json file by doing a npm install --save babel-plugin-transform-object-rest-spread.

That plugin is included in babel's stage2 preset too (babel-preset-stage-2 is the full npm package name).

edited Mar 29, 2016 at 14:47

answered Mar 29, 2016 at 13:18

Sergiu Paraschiv

10.2k5 gold badges42 silver badges51 bronze badges

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

4 Comments

Steve Over a year ago

It works! Thanks so much! I actually had to run: npm install babel-plugin-transform-object-rest-spread, and add "plugins": ["transform-object-rest-spread"] to .babelrc to get rid of the error.

Sergiu Paraschiv Over a year ago

Good to know, updated the answer with your extra fix details.

Felix Kling Over a year ago

"That's an ES7 feature." No it's not! It's a proposal for a future ES version. ES7 is already finalized (feature-wise at least).

Sergiu Paraschiv Over a year ago

As a proposal I mean.

Collectives™ on Stack Overflow

Syntax error from spread attribute

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