Gulp babel with babel-preset-react not transforming JSX code

Question

I'm having issue to compile react jsx code with gulp. Here is what my gulpfile.js looks like -

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('js', () => {
    return gulp.src('src/main.js')
        .pipe(babel({
            presets: ['es2015', 'react']
        }))
        .pipe(gulp.dest('build'));
});

gulp.task('default', ['js'], () => {
    gulp.watch('src/main.js', ['js']);
});

in my package json file

  "devDependencies": {
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2"
  },
  "dependencies": {
    "react": "^15.4.0",
    "react-dom": "^15.4.0"
  }

when i put es2015 code it does transform. But jsx code isn't transforming.

I am trying to compile following code -

import Hello from './hello.jsx';
import World from './world.jsx';


[1,2,3].map(n => console.log(n + 1));

but it complies only es6 codes not jsx

'use strict';

var _hello = require('./hello.jsx');

var _hello2 = _interopRequireDefault(_hello);

var _world = require('./world.jsx');

var _world2 = _interopRequireDefault(_world);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

[1, 2, 3].map(function (n) {
  return console.log(n + 1);
});

I also tried with webpack and found out that babel-preset-react is working but with gulp-babel it is not. In previous i was using another gulp tool to compile but this time i want to use gulp-babel but seems it's not working as expected.

Any kind of help is highly appreciated.

The only file you're telling `babel` to transpile is `src/main.js`, so that's exactly what it does. — Sven Schoenung, Nov 21 '16 at 13:59
It's transforming es6 code according to preset defined but why it's not transforming reactJS jsx code. Am I missing something? — HADI, Nov 21 '16 at 14:09
I think what he means is that your setup won't process imported files to be transpiled, just the entry (`main.js`) file. Try adding some JSX directly in `main.js` and you should see it transpiled. I have the feeling you thought gulp was magically going to load the required/imported files from the entry point in the same way webpack does. — Héctor, Nov 21 '16 at 14:14
@hector yes exactly what I was thinking about. I thought it will automatically import file from import statement like in browserify. So now I am wondering how I can achieve that. — HADI, Nov 21 '16 at 14:18
How about with browserify :) But seriously, you would need to pass in all files you want transpiled. The most obvious is to set the source in gulp to all files matching `*.jsx` in some directory. — ZekeDroid, Nov 21 '16 at 14:48
So using browserify to get advantage of require function and then use gulp Babel to transpile code? That's the standard approach? Or what is commonly or widely used to compile react jsx code with gulp? — HADI, Nov 21 '16 at 14:53

score 1 · Accepted Answer · answered Nov 22 '16 at 05:38

Thanks to @sven @hector to point me out.

I got it working with my traditional method browserify and babelify. Here is what it's look like

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

gulp.task('js', () => {
    return browserify({ entries: ['src/main.js'] })
        .transform(babelify, {presets: ["react", "es2015"]}) // "es2015", "react"
        .bundle()
        .pipe(source('main.js'))
        .pipe(gulp.dest('build'));
});

or if you are having problem then use webpack or for gulp fan use gulp-webpack

Gulp babel with babel-preset-react not transforming JSX code

1 Answers1