Browserify - ParseError: 'import' and 'export' may appear only with 'sourceType: module

Question

In my gulpfile I have

var gulp = require(\'gulp\');
var browserSync = require(\'browser-sync\').create();
var sass = require(\'gulp-sass\');
var babel = requ         


        

Answer 1

In your configuration, you pipe js/main.js to Babel, so that's the only file that will be transpiled. When Browserify requires app.js, it will seen ES6 content and will effect the error you are seeing.

You could use Babelify to solve the problem. It's a Browserify transform that will transpile the source that Browserify receives.

To install it, run this command:

npm install babelify --save-dev

And to configure it, change your task to:

gulp.task('js', function () {
    gulp.src('js/main.js')
        .pipe(browserify({ transform: ['babelify'] }))
        .on('error', errorAlert)
        .pipe(rename('./dist/js/bundle.js'))
        //.pipe(uglify())
        .pipe(gulp.dest('./'))
        .pipe(notify({ title: "Success", message: "Well Done!", sound: "Glass" }));
})