Babel transformation fails in gulp after reinstalling dependencies

Other Questions NPM
1

I’m having trouble with my gulp build process after reinstalling my project dependencies. Everything was working fine before, but now I get a compilation error when running my babel task through gulp.

The error message shows:

SyntaxError: main.js: Unexpected token (125:8)

The problematic code line is:

  124 |     response,
> 125 |     sync = false,
      |          ^
  126 |     timeout = 5000,
  127 |     type = 'POST',
  128 |     requestHeaders = {},

What’s weird is that when I run babel directly from command line on the same file, it works perfectly and produces the expected output.

Here’s my gulp configuration:

const gulp = require('gulp');
const plugins = require('gulp-load-plugins')();

gulp.task('transform', () => {
    return gulp.src([
        'src/main.js'
    ]).pipe(plugins.babel()).pipe(gulp.dest('dist'));
});

My babel config file:

{
    "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}]
    ]
}

Any ideas what could be causing this issue?

2

check if your gulpfile is using a cached version of babel or if there’s a plugin conflict. also, try deleting node_modules and reinstalling. sometimes a fresh start can clear up these weird issues!

3

Looks like a version mismatch between gulp-babel and babel core. When you reinstalled dependencies, you probably got different versions than before. Since babel CLI works but gulp fails, the gulp plugin’s likely using an older babel parser that can’t handle default parameter syntax. Try updating gulp-babel to the latest version or check if your package-lock.json got corrupted during reinstall. You might also want to pin the babel core version in your package.json to avoid this mess in the future.

4

Had this exact same issue last month and it drove me crazy for hours. Your babel config is missing the syntax plugin for default parameters. Even though you’ve got the transform-es2015-parameters plugin, gulp-babel sometimes needs the syntax plugin explicitly defined to parse the code before transformation. Add “syntax-default-parameters” to your plugins array in the babel config. It works from command line because you probably have a different babel version or config there. Also check if your gulp-load-plugins is loading the correct version of gulp-babel - sometimes it picks up weird cached versions that don’t match your package.json.