CODEWITHSUNDEEP
javascriptreactjsecmascript-6webpackbabeljs
Steve
Steve

Reputation: 53

Syntax error from spread attribute

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).

Upvotes: 2

Views: 2184

Answers (1)

Sergiu Paraschiv
Sergiu Paraschiv

Reputation: 10153

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).

Upvotes: 4

Related Questions