Unexpected token error for react fixed-data-table

- 1 answer

Ad

I'm trying to get the fixed-data-table sample to work:

import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Column, Cell} from 'fixed-data-table';

// Table data as a list of array.
const rows = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b2', 'c2'],
  ['a3', 'b3', 'c3'],
// .... and more
];

// Render your table
module.exports = React.createClass({
  render:  function() {
    return (
      <Table
        rowHeight={50}
        rowsCount={rows.length}
        width={200}
        height={200}
        headerHeight={50}>

      {/*if I have just this column, the page will render*/}
      <Column
        header={<Cell>Col 1</Cell>}
        cell={<Cell>Column 1 static content</Cell>}
        width={500}
        />

      {/*This column causes the error*/}
      <Column
        header={<Cell>Col 3</Cell>}
        cell={({rowIndex, ...props}) => (
        <Cell {...props}>
          Data for column 3: {rows[rowIndex][2]}
        </Cell>
        )}
        width={500}
      />
      </Table>
    );
  }
});

but when I run webpack it keeps throwing this error:

Module build failed: SyntaxError: C:/xxxx/Sample.jsx: Unexpected token (33:24)
  31 |     <Column
  32 |       header={<Cell>Col 3</Cell>}
> 33 |       cell={({rowIndex, ...props}) => (
     |                         ^
  34 |         <Cell {...props}>
  35 |           Data for column 3: {rows[rowIndex][2]}
  36 |         </Cell>

I think webpack sees {rowIndex, ...props} as an incorrectly formatted object, but I'm not sure where to go next.

here's my webpack.config:

var path = require('path');


module.exports = {
    context: path.join(__dirname, 'server/components'),
    entry: [
        'webpack-dev-server/client?http://localhost:8090', 
        'webpack/hot/only-dev-server', 
        "./entry.jsx"
    ],
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loaders: ['react-hot', 'babel-loader'],
            }
        ]
    },
    output: {
        path: __dirname + '/server/public/js/build',
        filename: 'bundle.js',
        publicPath: 'http://localhost:8090/js/build/'
    },
    resolve: {
        extensions: ['', '.js', '.jsx'],
    }
};
Ad

Answer

Ad

Assuming you have the right transforms installed and enabled (for Babel 6 you need babel-plugin-transform-object-rest-spread), you could be running into bug #T2631:

export default ( { title, ...other } ) => {
    // do something
};

fails with the output

SyntaxError: test-fn-spread.js: Binding rvalue (1:26)
> 1 | export default ( { title, ...other } ) => {
    |                           ^
  2 |     // do something
  3 | };

The bug was fixed in 6.1.2.

Ad
source: stackoverflow.com
Ad