React + Gulp + Babelify

Question

I am trying to convert my working app from React and Gulp with ES5 to React + Gulp and ES6.

I only tried to replace reactify with babelify but i am still getting gulp error: Illegal import declaration

Here is my gulpfile.js:

"use strict";

    var gulp = require('gulp');
    var connect = require('gulp-connect'); //Runs a local dev server
    var open = require('gulp-open'); //Open a URL in a web browser
    var browserify = require('browserify'); // Bundles JS
    var source = require('vinyl-source-stream'); // Use conventional text streams with Gulp
    var concat = require('gulp-concat'); //Concatenates files
    var lint = require('gulp-eslint'); //Lint JS files, including JSX
    var babelify = require("babelify");

    var config = {
        port: 9005,
        devBaseUrl: 'http://localhost',
        paths: {
            html: './src/*.html',
            js: './src/**/*.js',
            css: [
                'node_modules/bootstrap/dist/css/bootstrap.min.css',
                'node_modules/bootstrap/dist/css/bootstrap-theme.min.css',
                'node_modules/toastr/toastr.css'
            ],
            dist: './dist',
            mainJs: './src/main.js'
        }
    }

    //Start a local development server
    gulp.task('connect', function() {
        connect.server({
            root: ['dist'],
            port: config.port,
            base: config.devBaseUrl,
            livereload: true
        });
    });

    gulp.task('open', ['connect'], function() {
        gulp.src('dist/index.html')
            .pipe(open({ uri: config.devBaseUrl + ':' + config.port + '/'}));
    });

    gulp.task('html', function() {
        gulp.src(config.paths.html)
            .pipe(gulp.dest(config.paths.dist))
            .pipe(connect.reload());
    });

    gulp.task('js', function() {
        browserify(config.paths.mainJs)
            .transform(babelify)
            .bundle()
            .on('error', console.error.bind(console))
            .pipe(source('bundle.js'))
            .pipe(gulp.dest(config.paths.dist + '/scripts'))
            .pipe(connect.reload());
    });

    gulp.task('css', function() {
        gulp.src(config.paths.css)
            .pipe(concat('bundle.css'))
            .pipe(gulp.dest(config.paths.dist + '/css'));
    });

    gulp.task('lint', function() {
        return gulp.src(config.paths.js)
            .pipe(lint({config: 'eslint.config.json'}))
            .pipe(lint.format());
    });

    gulp.task('watch', function() {
        gulp.watch(config.paths.html, ['html']);
        gulp.watch(config.paths.js, ['js', 'lint']);
    });

    gulp.task('default', ['html', 'js', 'css', 'lint', 'open', 'watch']);

and this is my js file (main.js):

"use strict";

var React = require('react');
var Router = require('react-router');
var routes = require('./routes');
import React from 'react';

Router.run(routes, function(Handler) {
  React.render(<Handler/>, document.getElementById('app'));
});

Thanks a lot

Answer 1

You need to install babel preset npm i babel-preset-es2015 --save-dev

and add config to .babelrc like this

{
  "presets": [
    "es2015"
  ]
}

Or it's better to use gulp-babel

$ npm install --save-dev gulp-babel babel-preset-es2015

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

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

https://www.npmjs.com/package/gulp-babel