"Uncaught SyntaxError: Unexpected token { " using Reactify

Question

I am following a tutorial to create a FixedDataTable with React. However, I have some issues getting the following line to work in my jsx-file:

const {Table, Column, Cell} = require('fixed-data-table');

which gives the error (in Chrome):

Uncaught SyntaxError: Unexpected token {

I am using browserify and reactify to transform my jsx code to javascript. Other lines using require work fine.

I am quite new to JavaScript and React and would appreciate any suggestions to solve hte problem.

@NaisheelVerdhan No, I'm using a Browserify transform with "Reactify". — Philip, Dec 21 '15 at 15:24
And you're actually opening that *transformed* Javascript in Chrome...? What's the actual Javascript that Chrome gets to see and that it chokes on? — deceze, Dec 21 '15 at 15:25
@deceze Yes. It looks the same: const {Table} = require('fixed-data-table'); However, I have a debugger attached and the error references the untransformed javascript. Sorry if I'm being unclear. — Philip, Dec 21 '15 at 15:30
I am not sure if Reactify transforms all es6 syntaxes. According to the docs, it does not. Just to check, have you activated the es6 option in browserify by `[ reactify --es6 ]`. Consider using babel to transform all es6 syntaxes. — Naisheel Verdhan, Dec 21 '15 at 15:36

score 1 · Accepted Answer · answered Dec 21 '15 at 16:38

The issue was as pointed out in the comments that the ES6 option in reactify wasn't activated. I edited the following row in my gulpfile:

transform: [
    [ 'reactify', {'es6': true} ]
],

And then it worked. As a workaround I found out that you also can do:

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

var Table = FixedDataTable.Table;

var Column = FixedDataTable.Column;

instead of

var {Table, Column, Cell} = require('fixed-data-table');

1 Answers1