mobx: Decorators are not supported yet in 6.x pending proposal update.

found the solution:

• http://technologyadvice.github.io/es7-decorators-babel6/
• npm i --save-dev babel-plugin-transform-decorators-legacy

# .babelrc
{
  "presets": [
    "react",
    "es2015",
    "stage-1"
  ],
  "plugins": ["transform-decorators-legacy"]
}

As reported here: https://github.com/mobxjs/mobx-react/issues/41 it appears that the order of plugins is important, make sure that transform-decorators-legacy appears first!

My solution was .babelrc

{
  "presets": [
    "react",
    "es2015",
    "stage-1"
  ],
  "plugins": ["transform-decorators-legacy" /* should always be the first plugin! */]
}

webpack.config.js

module: {
    rules: [ // loader rules
      {
        test: /\.js$/, // files ending with .js
        exclude: /node_modules/, // exclude the node_modules directory
        loader: 'babel-loader', // use this (babel-core) loader
        query: {
          "presets": ["react", "env", "stage-0"],
          "plugins": ["transform-decorators-legacy"] /*  <<<< added this to the query */
        }
      },

So added "plugins": ["transform-decorators-legacy"] to both files

Install npm i --save-dev babel-plugin-transform-decorators-legacy. Update the package.json(I use creat-react-app and I have ejected):

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": ["transform-decorators-legacy"]     //++
  },

@mweststrate, Thanks mate, I’ll give a try. Thumbs up for the really good work.

@DigitalMarc ah! check: https://github.com/zeit/next.js/issues/26. Edit: see you already found it. Yeah I think the issue is probably that the plugins don’t get the right priority. If it is just for testing / play, you might try to modify the babelrc of next itself in your node_modules (or by creating a fork), that should give some clue whether this is indeed the issue

You need babel-plugin-transform-class-properties

On Nov 15, 2017, at 08:25, chen tuo notifications@github.com wrote:

Hey guys, i got a problem about mobx envirnoment. I have .babelrc file like this

{ “presets”: [“es2015”], “plugins”: [“transform-decorators-legacy”] } And i intall babel-preset and babel-plugin which is needed. After test, i could use decorator in my project. But when it comes to mobx use like

import { observable } from ‘mobx’; export default class Timer { @observable timer = 0; } I got output SyntaxError: index.js: Unexpected token at timer = 0, what should i do to fix it? I have knowed that decorator should work with class/function, Any extra configuration is needed whe n i want to create observable properties?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

Hey guys, i got a problem about mobx envirnoment. I have .babelrc file like this

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

And i intall babel-preset and babel-plugin which is needed. After test, i could use decorator in my project. But when it comes to mobx use like

import { observable } from 'mobx';
export default class Timer {
  @observable timer = 0;
}

I got output SyntaxError: index.js: Unexpected token at timer = 0, what should i do to fix it? I have knowed that decorator should work with class/function, Any extra configuration is needed whe n i want to create observable properties?

Hi guys, Within this config:

"babel": {
    "presets": ["es2015", "stage-0", "react"],
  "plugins": ["transform-decorators-legacy", "transform-decorators"]
  },

For this bit of code:

@computed get completedTodosCount() {
        return this.todos.filter(
            todo => todo.completed === true
        ).length;
    }

I got this output: Method has decorators, put the decorator plugin before the classes one.

I had this come up in my react-native project, after adding a new preset to my .babelrc. Solved by switching them around:

{
  "presets": ["stage-2", "react-native-stage-0/decorator-support"]
}

I have the save problem. It works fine like this.

{
  "presets": ["es2015", "stage-0", "react"],
  "plugins": ["transform-decorators-legacy", "transform-decorators"]
}