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 = require("gulp-babel");
var rename = require('gulp-rename');
var source =  require('vinyl-source-stream');
var browserify = require('gulp-browserify');
var notify = require("gulp-notify");


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


})

and in my app.js I am trying to import but get the errror

import SimpleBreakpoints from 'simple-breakpoints'

Any idea how to get rid of the error and use the import syntax?

Edit: the .babelrc

{
    "presets": ["es2015"],

}

Solution

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" }));
})

Comments

[LeBlaireau]

great thanks! 'so that's the only file that will be transpiled' was the info I was missing.

[George Katsanos]

@cartant do you mind adding your full gulpfile? It's quite different from the recipes and I can't seem to run it as you posted it (you can't pipe after browserify..)

[cartant]

@GeorgeKatsanos When answering the question, I only paid attention to the error in the title - which is the error Browserify effects if it receives an ES6 module. The answer was only intended to address the Babel/Babelify issue; I didn't pay much attention to other bits. (And questions related to builds are often too complicated to reproduce.) You should definitely follow the recipes you have mentioned and post a question if you have problems. Hope you get it working.