Babelify is rejecting my JSX, and I am using the 'react' preset

Question

Using browserify + babelify with react and ES6 and stage-2 and polyfill presets:

browserify -t [babelify --presets ['latest' 'react' 'babel-polyfill' 'stage-2'] ] client-src/root.js -o lib/root.js

With this javascript code:

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';

import RecordRow from './RecordRow';

const RecordSection = ({section, index}) => {

  return (
    { section.useHeading &&
     <tr>
       <td colspan="4" key={'sectionHeading' + index}>
         {section.heading}
       </td>
     </tr>
    }
    {section.rows.map((row, i) =>
      <RecordRow
        key={'sectionRow' + index + ',' + i}
        sectionIndex={index}
        rowIndex={i} />
    )}
  );
}

I get an error on the "." inside the JSX braces:

   SyntaxError: /blah/RecordSection.js: Unexpected token, expected , (10:13)
   8 | 
   9 |   return (
   > 10 |     { section.useHeading &&
        |              ^
   11 |      <tr>
   12 |        <td colspan="4" key={'sectionHeading' + index}>
   13 |          {section.heading}
    at Parser.pp$5.raise (/blah/node_modules/babylon/lib/index.js:4246:13)
    at Parser.pp.unexpected (/blah/node_modules/babylon/lib/index.js:1627:8)

why?

Your code is not valid JSX. Your `section.useHeading &&` logic is not in a place that makes sense. — loganfsmyth, Nov 21 '16 at 22:52
ah okay thank you. guess i should rename the post then ha ha. — evilfred, Nov 21 '16 at 22:53

score 0 · Answer 1 · edited May 23 '17 at 11:59

0

Turns out that JSX does not allow multiple items at a root. You can return arrays from functions but the thing passed to the render must have a single root. See How do I render sibling elements without wrapping them in a parent tag?

edited May 23 '17 at 11:59

Community

1
1

answered Nov 21 '16 at 23:49

evilfred

2,314
4
29
44

Babelify is rejecting my JSX, and I am using the 'react' preset

1 Answers1