cmp.is

Enabling decorators in Babel for Mobx

0 Comments

I ran in to some issues using Mobx in a project I started with react-boilderplate that I solved today with babel-plugin-decorator-transform-legacy.

I had a fun time trying to figure out that this piece of code was why my build was failing (trial and error ftw). There weren’t any errors just the notice that it failed.

@computed get asJSON() {
    return {
        id: this.id,
        title: this.title,
    }
}

Babel Removed Decorators in v6.x

According to this issue, babel removed decorators because of issues with the spec. Since this was a stage-0 feature they decided to get rid of it for now until the spec stablizes.

In the meantime you can use loganfsmyth/babel-plugin-transform-decorators-legacy

npm install babel-plugin-transform-decorators-legacy

Once installed, add to your babel plugins. For me that is in webpack (internal/webpack/webpack.base.babel.js) under the queryParams

loaders: [{
  test: /\.js$/, // Transform all .js files required somewhere with Babel
  loader: 'babel',
  exclude: /node_modules/,
  query: {
    presets: ['es2015', 'react', 'stage-0'],
    plugins: ["babel-plugin-transform-decorators-legacy"]
  },
},

Any issues or suggestions? Tell me on github.

0 Comments