I have a task file of GULP for compile js file with JSX code using babelify, but not work it

Question

I have a project with react, I have already installed babelify, also gulp, when I use the gulp command, it works perfectly and generates my output file, however if I add JSX code to my app.js file, send me the following error:

> events.js:160
>> throw er; // Unhandled 'error'
> SyntaxError C:/xxxxx/xxxxx/xxxx/myProject/source/app.js: Unexpected token (4:18)

As if I had not installed babelify, but it is already installed with npm

npm install --save-dev babelify

and gulp with

npm install --global gulp

my app.js file has the following code:

var React = require('react');
var ReactDOM = require('react-dom');

var listOfItems = <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>;
ReactDOM.render(listOfItems, document.getElementById('react-application'));

and my gulp file is the next...

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

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

thank you very much for your help!

Answer 1

Can you make the following changes in your gulp file

.transform(babelify, {presets: ["es2015", "react"]})

Then

npm install --save-dev babel-preset-es2015 babel-preset-react

Then run gulp.. it should work