Gulp / ES2015 / React Unexpected @ and transform-decorators/-legacy

Question

I've been on Stack for a couple hours. I'm using gulp and I'm trying to get my build process set up.

It looks like this to build the js.

gulp.task('buildJS', function () {
    browserify('./browser/js/main.js')
        .transform('babelify',
        {
            presets: ["es2015", "react"],
            plugins: ['transform-class-properties', "transform-object-rest-spread", "transform-decorators-legacy"]
        })
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./dist'));
});

This ends up giving me this error:

events.js:141
      throw er; // Unhandled 'error' event
      ^
SyntaxError: Unexpected character '@'

My babelrc looks like this:

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-object-rest-spread","transform-class-properties", "transform-decorators-legacy"]
}

So it feels like the transform-decorators-legacy is not working.

I am using "babel-core": "^6.7.2".

I have installed "babel-plugin-transform-decorators-legacy": "^1.3.4",

I've tried to use the stage-x presets only to get Decorators are not supported yet in 6.x pending proposal update. Has anyone still been having trouble with transform-decarators-legacy post update?

Did you install the babel-plugin-transform-decorators-legacy package? — zakangelle
it was events.js, somewhere in gulp. I wasn't handling the error manually, which was required in this gulp task. see below if interested. — Peege151

Peege151 Peege151 · Accepted Answer · 2016-03-18T15:45:58

There were two critical errors here, both involving negligence on the build process.

A little back info: I was moving this project from webpack back over to gulp. I am not a huge fan of webpack, and I gulp comes more intuitively to me so I thought I'd had enough of my webpack experiment and I would transition back to gulp.

Issue: #1 The error wasn't really be handled so it was hard to trace. I say gulp was more intuitive to me, but I wasn't handling the errors which requires something like this:

//Some gulp task
    .bundle()
     //this is what really helped.
    .on('error', function(err) { console.error(err); this.emit('end'); })
    .pipe(source('bundle.js'))

This quickly led me to my answer. In webpack, you would import style files into your js files and they would load inline. Basically, my js was trying to parse an scss file that started with @import.

It was easily confused to be es7 decorators causing an issue because it's the same character, but in-fact, everything was working and I was just not quite done transitioning from webpack back to gulp.

Hopefully this helps someone in the future, I wasted a couple hours on it. Biggest issue was not handling the gulp error though.

Gulp / ES2015 / React Unexpected @ and transform-decorators/-legacy

1 Answers