Converting jsx with ES6 import syntax using reactify

Question

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?

You might be better off using babel for the transformation. babeljs.io — Felix Kling
– Felix Kling, Commented Apr 17, 2015 at 19:08
Exactly, in this case you should use babel to transform your code, here is an example: 4dev.tech/2015/12/how-to-use-es6-very-simple-example — Leonardo Jines
– Leonardo Jines, Commented Jan 27, 2016 at 20:52

thibauts · Accepted Answer · 2015-04-17 21:53:05Z

14

Try babelify in place of reactify

answered Apr 17, 2015 at 21:53

thibauts

1,6489 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Converting jsx with ES6 import syntax using reactify

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related