title: MobX decorators not working
body: <p>I'm having trouble getting decorators such as @observable and @computed to work in my project. </p>
  
  <p>Here are my files. </p>
  
  <p>package.json: </p>
  
  <pre><code>{
    "name": "heroku-react",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "babel-plugin-syntax-decorators": "^6.13.0",
      "mobx": "^3.1.11",
      "mobx-react": "^4.2.1",
      "react": "^15.5.4",
      "react-dom": "^15.5.4"
    },
    "devDependencies": {
      "babel-plugin-transform-decorators-legacy": "^1.3.4",
      "babel-preset-stage-1": "^6.24.1",
      "react-scripts": "1.0.7"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject"
    }
  }
  </code></pre>
  
  <p>App.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import GameBoard from './components/game-board';
  import { inject, observer } from 'mobx-react';
  
  class App extends Component {
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;div className="App-header"&gt;
          &lt;/div&gt;
          &lt;GameBoard /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>.babelrc:</p>
  
  <pre><code>{
    "presets": [
      "es2015",
      "react",
      "stage-1"
    ],
    "plugins": ["transform-decorators-legacy"]
  }
  </code></pre>
  
  <p>When I add the @observer decorator like so (@observer class App extends Component {...}) before my class declaration I receive this error:</p>
  
  <pre><code>Failed to compile
  ./src/App.js
  Syntax error: Unexpected token (7:0)
  
     5 | import { inject, observer } from 'mobx-react';
     6 | 
  &gt;  7 | @observer class App extends Component {
       | ^
     8 |   render() {
     9 |     return (
    10 |       &lt;div className="App"&gt;
  </code></pre>