babel 7 Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead

Question

I\'m using react js with latest babel 7. when I use decorators of mobx I get the error

Parsing error: Using the export keyword between a decorator and a class is not

Answer 1

There is a work around you can do. Modify your class to the following.

import React, { Component } from 'react';
import { observer,inject } from 'mobx-react'

import './style.scss'

@inject('routingStore', 'UserStore')
@observer
class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
        <div>
            <h1>Login</h1>
        </div>
      );
    }
  }

export default Login;

Technically, you just move export to the bottom of the class. If you have a lot of classes, that solution is not the best one. I couldn't find better way, yet.

Answer 2

Instead of changing the import statements across your project, you could use the legacyDecorators option in your .eslintrc file.

{    
  "parserOptions": {
     "ecmaFeatures": {
       "legacyDecorators": true
     }
   }
}

Answer 3

This worked for me (using create-react-app with customize-cra, with decorators enabled)

import React, { Component } from 'react';

export default @connect(
  store => ({
    //...
  }),
  dispatch => ({
    //...
  }),
)
class MyComponent extends Component {
  render() {
    return (
      <div>
        //...
      </div>
    );
  }
}