Grunt build failing - ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Question

I have gone through many posts on github and stackoverflow. I have the following dev dependencies in my package.json for the es6 to es5 transpilation.

        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.0",
        "babel-loader": "^6.0.0",
        "babel-preset-env": "^1.6.1",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-latest": "^6.24.1",
        "babelify": "^8.0.0",
        "browserify": "^15.0.0",
        "grunt-browserify": "^5.2.0",
        "grunt": "^1.0.1",
        "grunt-cli": "^1.2.0"

I have setup a grunt task to compile my es6 file to es5 using babelify as transformer and browserify.

       browserify: {
            dist: {
                src: [‘src/component/myes6.js’],
                dest: ‘dist/src/component/myes5.js’,
                options: {
                    transform: [
                        ['babelify', {presets: [["es2015", { loose: true, modules: false }]]}]
                    ],
                    browserifyOptions: {
                        debug: true
                    }
                }
            }
        }

My es6 js file is importing a node module which is es6 js file and exported as function. I tried to follow many suggestion from various forums and looked through the babel/babelify/grunt-browserify documentation but could not land on a concrete conclusion.

Earlier I thought, it could be versions issue but I am now using all babel 6 version and latest browserify/grunt-browserify etc. But still, I am seeing the following error:

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

Any help or pointers will be appreciated.

Answer 1

I've solved it installing esmify plugin npm install babel-plugin-esmify browser-resolve --save-dev.

browserify: {
           dist: {
               src: ['src/component/myes6.js'],
               dest: 'dist/src/component/myes5.js',
               options: {
               plugin: [
                   [require('esmify')]
               ],
               transform: [
                    ['babelify', {
                        presets: [["es2015", { loose: true, modules: false }]]
                       }
                   ]
               }
           }
       },  

  

Answer 2

I haven't tried running it, but the square brackets around your browserify dist/src shouldn't be there. Try running this file without them.