[React JS] Method has decorators, put the decorator plugin before the classes one

[thearabbit]

I tried to use this in React js

import React from 'react';
import {autobind} from 'core-decorators';

class Login extends React.Component {
    @autobind
    focus() {
        this.textInput.focus();
    }

    render() {
        return (
           <div>
                 <input type="text" ref={ (input) => {this.textInput = input} }/>
                 <input type="button" value="Focus the text input" onClick={this.focus} />
           </div>
        );
     }
}

It show error

Method has decorators, put the decorator plugin before the classes one

Please help me.

{
  "name": "react-test",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "autobind-decorator": "^1.3.4",
    "babel-runtime": "^6.18.0",
    "bootstrap": "^3.3.7",
    "core-decorators": "^0.15.0",
    "graphql": "^0.9.1",
    "griddle-react": "^0.7.1",
    "jquery-validation": "^1.16.0",
    "meteor-node-stubs": "~0.2.3",
    "react": "^15.4.2",
    "react-addons-pure-render-mixin": "^15.4.2",
    "react-bootstrap": "^0.30.7",
    "react-breadcrumbs": "^1.5.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.2",
    "react-router-bootstrap": "^0.23.1",
    "simpl-schema": "^0.1.0",
    "uniforms": "^1.9.0",
    "uniforms-bootstrap3": "^1.9.0"
  },
  "devDependencies": {}
}

[jayphelps]

The order of your babel plugins and/or presets needs to be changed:

• babel-plugin-transform-decorators-legacy#note-order-of-plugins-matters
• babel/babel#2648 (comment)

The decorators plugin needs to go before any class-related plugins or presets.