Search code examples
gulpbabeljsgulp-babel

gulp-babel get syntax error after removed node_modules and run npm install again


I have gulp-babel task in my gulp build script and it was working well until I removed the node_modules directory and run npm install again. It returned

SyntaxError: j.js: Unexpected token (790:10)

and the error log pointed the error token as follow :

  789 |     data,
> 790 |     async = true,
      |           ^
  791 |     cache = 'no-cache',
  792 |     method = 'GET',
  793 |     headers = {},

If I compile j.js with cli babel j.js directly, will not get error message and returned compiled code as expected.

My gulp task code :

const gulp = require( 'gulp' );
const { babel } = require( 'gulp-load-plugins' )();

gulp.task( 'babel', () => {
    return gulp.src( [
        '.tmp/j.js'
    ] ).pipe( babel() ).pipe( gulp.dest( '.tmp' ) );
} );

My .babelrc :

{
    "presets" : [ "es2016" ],
    "plugins" : [
        "transform-es2015-arrow-functions",
        "transform-es2015-object-super",
        "transform-es2015-parameters",
        "transform-object-assign",
        "transform-es2015-block-scoping",
        "transform-es2015-shorthand-properties",
        "transform-es2015-block-scoped-functions",
        "transform-es2015-for-of",
        "transform-es2015-destructuring",
        [ "transform-es2015-classes", { "loose" : true } ],
        [ "transform-es2015-spread", { "loose" : true } ],
        [ "transform-es2015-template-literals", { "loose" : true } ]
    ]
}

My npm dependencies :

"devDependencies": {
    "babel-cli": "^6.14.0",
    "gulp-babel": "^6.1.2",
    "babel-plugin-transform-es2015-arrow-functions": "^6.8.0",
    "babel-plugin-transform-es2015-block-scoped-functions": "^6.8.0",
    "babel-plugin-transform-es2015-block-scoping": "^6.10.1",
    "babel-plugin-transform-es2015-classes": "^6.9.0",
    "babel-plugin-transform-es2015-destructuring": "^6.9.0",
    "babel-plugin-transform-es2015-for-of": "^6.8.0",
    "babel-plugin-transform-es2015-object-super": "^6.8.0",
    "babel-plugin-transform-es2015-parameters": "^6.11.4",
    "babel-plugin-transform-es2015-shorthand-properties": "^6.8.0",
    "babel-plugin-transform-es2015-spread": "^6.8.0",
    "babel-plugin-transform-es2015-template-literals": "^6.8.0",
    "babel-plugin-transform-object-assign": "^6.8.0",
    "babel-preset-es2016": "^6.11.3",
    "colors": "^1.1.2",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-file-include": "^0.14.0",
    "gulp-load-plugins": "^1.2.4",
    "gulp-uglify": "^2.0.0",
    "gulp-watch": "^4.3.9",
    "require-dir": "^0.3.0",
    "run-sequence": "^1.2.2",
    "uglify-js": "github:mishoo/UglifyJS2#harmony"
  },

Solution

  • I am coming to answer my question again.

    Babeljs 6.14.0 start to support "async function" which was declared in ES7. The word "async" became a keyword for the compiler, so I can't use "async" as a variable name.

    Then I change "async = true" to "sync = false" to solve this problem.

    I reported an issue to the Babeljs on github. I think this issue has already been fixed.