JSX not transpiling with Gulp and Babel - reactjs

Question

I have a Gulp script with which I am trying to launch a React application.
The Gulp file is named gulpfile.babel.js
I am adding the Babel preset 'env' as an option
There is also a .babelrc file in the same directory with the same preset option
The Gulp file includes:
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const babel = require('gulp-babel');
// convert jsx to JS
gulp.task('babelFiles', function() {
return gulp.src('js/*.#(js|jsx)')
.pipe(babel({
compact: false,
presets: ['env'],
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}));
});
// Default task
gulp.task('default', ['babelFiles', 'browserSync']);
// Configure the browserSync task
gulp.task('browserSync', ['babelFiles'], function() {
browserSync.init({
server: {
baseDir: ''
},
})
})
When the Gulp task launches I see an error about an unexpected token:
29 | return (
> 30 | <div>
| ^
This tells me something is wrong with the JSX transpilation in the react setup? Would you happen to know what the problem could be here?

Answer 1

babel-preset-env does not include a preset to transpile your JSX to plain JavaScript. For that you'll need babel-preset-react:
npm i --save-dev babel-preset-react
Then apply it:
presets: ['env', 'react']
babel-preset-env determines which plugins you'll need for your JavaScript, such as plugins for ES2015, 2016, and 2017. It does no, however, account for things such as JSX.