Reactjs – Converting jsx with ES6 import syntax using reactify

browserifyecmascript-6gulpreactjs

I am using reactify (a browserify transform https://github.com/andreypopp/reactify) to convert JSX to regular JS.
I have setup a gulp task:

gulp.task('reactifyes6', function () {
    var bundler = watchify(browserify(watchify.args));
    return bundler.add('./Scripts/Widget/ReactComponents/Dashboard.jsx')
    .transform('reactify',{harmony:true, es6module:true})
    .bundle()
    .pipe(source('Dashboard.js'))
    .pipe(gulp.dest('./Scripts/Widget/Build/'));
});

For the sake of getting this working I have two files: Dashboard.jsx and someJS.js.
Dashboad.jsx

import myFunc from './someJS.js';
myFunc();

someJS.js

export default function () { console.log('test'); };

When I run the gulp task 'reactifyes6', I get a ReactifyError "Illegal import declaration while parsing file: [path to my file]"

What am I doing wrong and how could I compile ES6 import / export syntax?

Best Answer

Try babelify in place of reactify