Parseerror: 'import' and 'export' may appear only with 'sourcetype: module'

Question

Problem :

I am very new to gulp. I am facing following gulp error

My  gulpfile.js

var mygulp        = require('gulp');
var mysource      = require('vinyl-source-stream');
var mybrowserify  = require('browserify');
var mybabelify    = require("babelify");
var mywatch       = require('gulp-watch');

mygulp.task('make:game', function(){
  return mybrowserify({
    entries: [
      'index.js'
    ]
  })
  .transform('babelify')
  .bundle()
  .pipe(mysource('index.js'))
  .pipe(mygulp.dest('app/'));
})

gulp make:game
[13:09:48] Using gulpfile ~/Documents/ice-cream/gulpfile.js
[13:09:48] Starting 'make:game'...

events.js:154
      throw er; // Unhandled 'error' event
      ^
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

I am unable to understand the error. How can I resolve this error?

Answer 1

The older versions of the Babel came with everything out of a box. But now the newer version requires you to install whichever plug-in your setup needs. So first, you will need to install a ES2015 preset by below command.

npm install babel-preset-es2015 --save-dev

Next, you just need to tell the babelify to use a preset you have just installed.

return browserify({ ... })

  .transform(babelify.configure({

    presets: ["es2015"]

  }))

  ...

 

OR

ESLint natively doesnt support this as this is against a spec. But if you use the babel-eslint parser then inside your eslint config file you can do this as shown below :

{

  "parser": "babel-eslint",

  "parserOptions": {

    "sourceType": "module",

    "allowImportExportEverywhere": true

  }

}