Krzysztof Mianowski


Browserify Transform Error : ParseError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’
August 30th, 2019

This error hit me when i was trying to use Swiper’s custom build. In my gulp setup I make use of browserify and babelify like this:

  gulp.task('js', (done) => {
      browserify('./src/js/main.js', {debug:true})
         .transform('babelify', {
            presets: ['@babel/preset-env']
         }) //transpile es6 to es2015
         .on('error', gutil.log.bind(gutil, 'Browserify Error'))
         .pipe(sourcemaps.init({loadMaps: true}))
               compress: {
                  drop_console: true


The error after running this task was:

import { $, addClass, removeClass, hasClass, toggleClass, attr, removeAttr, data, transform, transition as transition$1, on, off, trigger, transitionEnd as transitionEnd$1, outerWidth, outerHeight, offset, css, each, html, text, is, index, eq, append, prepend, next, nextAll, prev, prevAll, parent, parents, closest, find, children, remove, add, styles } from 'dom7/dist/dom7.modular';
ParseError: 'import' and 'export' may appear only with 'sourceType: module'


After a pretty long search this is the solution i came up with:

Babelify does not process any node_modules by default if your package is making use of es6 modules just like swipers custom builds, you need to include those dependencies in the gulp file like this:

browserify('./src/js/main.js', {debug:true})
    .transform('babelify', {
        global: true, //include all of the files in the root
        ignore: [/\/node_modules\/(?!swiper|dom7\/)/], //exclude node modules but process swiper and dom7
        presets: ['@babel/preset-env']


dom7 needs to be included too since swiper is making use of it.