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

support for the experimental syntax 'decorators-legacy' isn't currently enabled
eslint please use export dec class instead
@babel/plugin-proposal-decorators
babel-eslint
cannot use the decorators and decorators-legacy plugin together
babel 6 decorators
eslint decorators
babel 7 legacy decorators

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 allowed. Please use export @dec class instead.

my code

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


import './style.scss'


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

        }
    }


    render() {

        return (
            <div>
                <h1>Login</h1>
            </div>
        )
    }
}

package.json

    {
  "name": "admin-managment-barber",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "7.1.0",
    "@svgr/webpack": "2.4.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "9.0.0",
    "babel-jest": "23.6.0",
    "babel-loader": "8.0.4",
    "babel-plugin-named-asset-import": "^0.2.3",
    "babel-preset-react-app": "^6.1.0",
    "bfj": "6.1.1",
    "case-sensitive-paths-webpack-plugin": "2.1.2",
    "chalk": "2.4.1",
    "css-loader": "1.0.0",
    "dotenv": "6.0.0",
    "dotenv-expand": "4.2.0",
    "eslint": "5.6.0",
    "eslint-config-react-app": "^3.0.5",
    "eslint-loader": "2.1.1",
    "eslint-plugin-flowtype": "2.50.1",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.2",
    "eslint-plugin-react": "7.11.1",
    "file-loader": "2.0.0",
    "fork-ts-checker-webpack-plugin-alt": "0.4.14",
    "fs-extra": "7.0.0",
    "html-webpack-plugin": "4.0.0-alpha.2",
    "identity-obj-proxy": "3.0.0",
    "jest": "23.6.0",
    "jest-pnp-resolver": "1.0.1",
    "jest-resolve": "23.6.0",
    "mini-css-extract-plugin": "0.4.3",
    "mobx": "^5.6.0",
    "mobx-react": "^5.4.2",
    "mobx-react-router": "^4.0.5",
    "moment": "^2.22.2",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "pnp-webpack-plugin": "1.1.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-preset-env": "6.0.6",
    "postcss-safe-parser": "4.0.1",
    "react": "^16.6.3",
    "react-app-polyfill": "^0.1.3",
    "react-dev-utils": "^6.1.1",
    "react-dom": "^16.6.3",
    "react-router-dom": "^4.3.1",
    "resolve": "1.8.1",
    "sass-loader": "7.1.0",
    "style-loader": "0.23.0",
    "terser-webpack-plugin": "1.1.0",
    "url-loader": "1.1.1",
    "webpack": "4.19.1",
    "webpack-dev-server": "3.1.9",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "3.6.3"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "resolver": "jest-pnp-resolver",
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jsdom",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ]
  },
  "babel": {
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
                }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ],
    "presets": [
      "react-app"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.6",
    "@babel/plugin-transform-react-jsx-source": "^7.0.0"
  }
}

i guess it's maybe babel configuration or something. I stuck with this issue for some hours and I also tried to downgrade babel to 6.23.0 but without success.

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.

Please use `export @dec class` instead · Issue #662 · babel/babel , I am getting this error using 8.2.2 Using the export keyword between a decorator and a class is not allowed. Please use export @dec class  Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

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

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

decorators (legacy) enforce decorators after export · Issue #8598 , The babel 6 legacy decorators transform allowed decorators on either side of the export after upgrading to babel 7 using the new decorators transform with legacy: true, error Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use export @dec class instead. This is confusing to me. The suggestion of using "legacyDecorators": true, works, but isn't a satisfying answer to me.. The reason for that is that I was under the impression that babel-eslint uses babel to apply rules in eslint.

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>
    );
  }
}

Parsing error: Using the export keyword between a decorator and a , " Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use export @dec class instead." image. Here  I have a Issue.SyntaxError: Using the export keyword between a decorator and a class is not allowed. Please use export @dec class instead ` @Observer export default class ShopCar extends Component

babel 7 Using the export keyword between a decorator and a class , Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use export @dec class instead. my code import React, {  Using the export keyword between a decorator and a class is not allowed. Please use export @dec class instead. please open an issue at babel or TC39 instead.

Using the export keyword between a decorator and a class is not , Using the export keyword between a decorator and a class is not allowed. Please use export @dec class instead. package.json: { "name": "AwesomeProject56"  Using the export keyword between a decorator and a class is not allowed. Please use export @dec class Problem with the new, "decoratorsBeforeExport" option

[SOLVED] ES7 decorators and class properties for Webpack 4 , babel 7 Using the export keyword between a decorator and a class is not allowed​. Please use `export #dec class` instead - reactjs. export @decorator class MyClass {} // or @decorator export class MyClass {} The underlying question is whether or not the export keyword is part of the class declaration or it is a "wrapper". In the first case it should come after decorators, since decorators come at the beginning of the declaration; in the second one it should come before