ES7 Mobx Decorators with Babelify 7 and browserify, unexpected token @

Question

Trying to use Mobx Decorators with Babelify 7.3.0 and Browserify 14.4.0. Admitedly, very new to this and this is a first time setup of this stack. Getting syntax errors on the decorators from babel.

  { SyntaxError: /home/forrest/code/noat/views/js/main.js: Unexpected token (24:23)
  22 | 
  23 | class incrementStore {
> 24 |     @observable number = 0;
     |                        ^
  25 | 
  26 |     constructor() {
  27 |         mobx.autorun(() => console.log(this.report));

Here is the offending code

const React = require('react');
const ReactDOM = require('react-dom');
const r = require('r-dom')
const $ = global.jQuery = require('jquery');
//bootstrap = require('bootstrap')
const rbs = require('react-bootstrap');
import {observer} from 'mobx-react';

//an example react component to render stuff
@observer
class Incrementer extends React.Component {

    //@observer
    render() {
        const store = this.props.store;
        return(r.div([
            r.h1("#{this.props.count}"),
            r(rbs.Button, {bsStyle: 'info', onClick:Incrementer.increment}[r.span('Increment')])
        ]))
    }
}

//an example model to hold onto data
class incrementStore {
    @observable number = 0;

    constructor() {
        mobx.autorun(() => console.log(this.report));
    }
    @computed get getNumber() {
        return number;
    }

    increment() {
        number += 1;
    }
}

let mainElement = r(Incrementer);

$(document).ready(()=> {
    ReactDOM.render(mainElement, $('#react-container')[0]);
});

Here is my build system:

const gulp = require('gulp');
const browserify = require('browserify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');


let browserifyOptions = {entries: './js/main.js', extensions: ['.js'], debug: true}
gulp.task('build', function () {
    return browserify()
        .transform(babelify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('dist'));
});

gulp.task('watch', ['build'], function () {
    gulp.watch('*.js', ['build']);
});


gulp.task('default', ['watch']);
    */


const watchify = require('watchify');

const browserify = require('browserify');
const babelify = require('babelify');

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const gutil = require('gulp-util');
const sourcemaps = require('gulp-sourcemaps');
const assign = require('lodash.assign');

let customBrowserifyOpts = {
    entries: ['./views/js/main.js'],
    debug: true//process.env.NODE_ENV !== 'production'
};

let browserifyOpts = assign({}, watchify.args, customBrowserifyOpts);

let b = watchify(browserify(browserifyOpts));


bundle = function() {
    return b
        .transform(babelify)
        .bundle()
        .on('error', gutil.log.bind(gutil, 'Browserify Stack Threw Error'))
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(uglify())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./public'));
};

gulp.task('js', bundle);

b.on('update', bundle);

b.on('log', gutil.log);

bundle();

And here finally is my .babelrc, which I confirmed is getting read properly by babel.

{
   "presets": ["es2015"],
   "plugins": ["transform-decorators"],
   "sourceMaps": true
}

There ARE other folks out there with this issue, but they're all for old versions of babel, like 6 and 5. http://techqa.info/programming/question/33635511/simple-es7-decorator-with-babel They mostly involve setting stage-1 or stage-0 which doesnt exist anymore — light24bulbs, Jun 24 '17 at 20:17
this seems like a clue from the babel 7 docs but i dont know enough about the babel ecosystem to understand what they are talking about https://babeljs.io/blog/2017/03/01/upgrade-to-babel-7#babel-preset-stage-1-babel-preset-stage-2-decorators- — light24bulbs, Jun 24 '17 at 20:19
FYI, ES7 was released *last year* (ES2016). Decorators are a *proposal*, i.e. they are not part of any released spec. — Felix Kling, Jun 25 '17 at 19:12

score 2 · Accepted Answer · answered Jun 24 '17 at 22:18

Alright, so to clear up some of my confusion, there is no babel 7, just babelify 7, under the hood using babel 6. Babel 6 actually DROPPED support for decorators, even though babel 5 supported it. Wow. The error I posted above was actually not the decorator not being recognized, it was class property declaration. This is what my .babelrc looks like now:

 {
  "presets": ["stage-0", "es2015"],
  "plugins": ["transform-imports", "transform-class-properties", 
  "transform-decorators-legacy"],
  "sourceMaps": true
}

Things got a lot more configure-happy in babel 6.

The legacy transform is necessary to get decorators back in. "Transform Decorators" without legacy is a placeholder which does nothing.

Wanted to post my successful babel configuration incase anyone else confused comes along. This would have been a lot easier for a new user in babel 5

ES7 Mobx Decorators with Babelify 7 and browserify, unexpected token @

1 Answers1