Vueify: 'import' and 'export' may appear only with 'sourceType: module'

Question

I am using Vue. This is how I'm building in my gulpfile:

browserify('./main.js')
.transform(vueify)
.bundle()
.pipe( fs.createWriteStream('./build/bundle.js') );

The problem is vueify doesn't handle the es6 exports in my .js files. It only works in .vue components. It works with module.exports, but I'd like to take advantage of es6 code in my .js files.

When bundle() is called, I currently get the error:

'import' and 'export' may appear only with 'sourceType: module'

Is there any way to modify the gulpfile to handle js files using es6 that my .vue components are importing?

Answer 1

After hours of struggling, I finally figured it out.

1. Install babelify: npm install --save-dev babelify
2. Add this to the top of your gulpfile: var babelify = require( 'babelify' );

3. Add .transform( babelify ):

   return browserify('./main.js') //tells browserify where to start, but doesn't run the resolve algorithm yet
   .transform( vueify ) //executes vueify to transform vue components to js
   .transform( babelify ) //executes babelify to transform es6 to es5
   .bundle() //runs the module resolve algorithm on all the require() statements      
   .pipe( fs.createWriteStream('./build/bundle.js') );