Creating a JSX list of items (chapter 2) throws a parsing error when building with 'gulp'

[s3170637]

After writing the JSX code for an unordered list, I've been trying to build the module using 'gulp' command. However, I am getting the following error:

SyntaxError: /path/to/app.js: Unexpected token in the 'transform' directive within the gulpfile.js

61 | var jsxListOfItems = < ul className="list-of-items"> ... < /ul>
at Parser.pp.raise ... // rest of the error stack

My gulp file is written as follows:
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

gulp.task('default', function () {
return browserify('./source/app.js')
.transform(babelify)
.bundle()
.pipe(source('snapterest.js'))
.pipe(gulp.dest('./build/'));
}); //end gulpfile

My app.js has the following code that seems to bring up the issue:

var jsxListOfItems = < ul className="list-of-items">
< li className="item-1">Item 1< /li>
< li className="item-2">Item 2< /li>
< li className="item-3">Item 3< /li>
< /ul>;

// render(element, parent element); - or, 'render what' and 'render where'.
ReactDom.render(jsxListOfItems, document.getElementById('react-application'));

• this is just standard JSX from what I can see; I've installed all the dependencies without errors as per first chapter of the book, and up until this point everything has been working perfectly, - could you suggest where I've gone wrong here?

[fedosejev]

@s3170637 looks like you're missing 3 closing </li> tags in your app.js?

[s3170637]

@fedosejev my apologies, when I copied it over I forgot to put a space in between the < and / to make sure closing tags show up in GitHub, so it looked like they weren't there. But I do have the closing tags in my actual code. I've amended the original post to reflect this.

[rickhaffey]

@s3170637

I was running into the same issue.

Looks like it's due to a versioning issue with babelify. Installing babelify with npm, without specifying a version, gave me 7.1.0. Using that version and the code example noted above, I was also seeing a parsing error. If I instead install the version in https://github.com/fedosejev/react-essentials/blob/master/code/chapter02/snapterest/package.json (6.2.0), it works.

npm install --save-dev babelify@6.2.0

[s3170637]

@rickhaffey

Awesome! I'll give that a try. Had a suspicion it might have been something along those lines - will let you know if that has solved the problem shortly

[RenatKunafin]

More information here
babel/babelify#131

[fedosejev]

@rickhaffey @RenatKunafin thanks for contributing!

[ttanzer]

To follow up on the comment from @RenatKunafin, if you want to use the latest version of babelify (that uses babel 6.0.0) you need to use presets.

Install the babel presets using gulp:
From the command line
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react

Update gulpfile.js:
change:
.transform(babelify)
to
.transform(babelify.configure({ presets: ["es2015", "react"] }))

You should then be able to run gulp without error.

[rubenve]

I was experiencing the exact same problem, but @ttanzer's solution worked like a charm. Thanks!

[cmundi]

The solution from @ttanzer works. Consider closing this issue.

[fedosejev]

@ttanzer thanks for your help!

[eadbhard]

Just wanted to thank @ttanzer - his solution do work.