Title: How to activate the legacyDecorators option in babel?
Tags: reactjs;babeljs;decorator
Question: I want to use a Decorater for my component. However i encounter the following error message:

```Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead.
```

I found the solution in the following post recommending to use the ```legacyDecorators``` option in the ```.eslintrc``` file.

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

```

However, i have no idea where i have to insert that code to activate the legacy option.

Update

I meanwhile ejected my create-react-app and im now able to configure babel and eslint (eslintConfig) directly in package.jason as you see below.

```{
  "name": "Test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "7.8.4",
    "@babel/runtime": "7.0.0-beta.55",
    "@fortawesome/fontawesome-free": "^5.13.0",
    "@material-ui/core": "^1.5.1",
    "@material-ui/icons": "^1.1.0",
    "@svgr/webpack": "4.3.3",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^24.9.1",
    "@types/node": "^12.12.28",
    "@types/react": "^16.9.21",
    "@types/react-dom": "^16.9.5",
    "@types/react-router-dom": "^5.1.3",
    "@typescript-eslint/eslint-plugin": "^2.10.0",
    "@typescript-eslint/parser": "^2.10.0",
    "axios": "^0.19.2",
    "babel-eslint": "10.0.3",
    "babel-jest": "^24.9.0",
    "babel-loader": "8.0.6",
    "babel-plugin-named-asset-import": "^0.3.6",
    "babel-preset-react-app": "^9.1.1",
    "bootstrap": "^4.4.1",
    "camelcase": "^5.3.1",
    "case-sensitive-paths-webpack-plugin": "2.3.0",
    "css-loader": "3.4.2",
    "d3-ease": "^1.0.6",
    "dotenv": "8.2.0",
    "dotenv-expand": "5.1.0",
    "eslint": "^6.6.0",
    "eslint-config-react-app": "^5.2.0",
    "eslint-loader": "3.0.3",
    "eslint-plugin-flowtype": "4.6.0",
    "eslint-plugin-import": "2.20.0",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.18.0",
    "eslint-plugin-react-hooks": "^1.6.1",
    "file-loader": "4.3.0",
    "fs-extra": "^8.1.0",
    "html-react-parser": "^0.10.3",
    "html-to-react": "^1.4.2",
    "html-webpack-plugin": "4.0.0-beta.11",
    "identity-obj-proxy": "3.0.0",
    "install": "^0.13.0",
    "jest": "24.9.0",
    "jest-environment-jsdom-fourteen": "1.0.1",
    "jest-resolve": "24.9.0",
    "jest-watch-typeahead": "0.4.2",
    "jquery": "^3.4.1",
    "material-kit-react": "^1.8.0",
    "mdbreact": "^4.25.5",
    "mini-css-extract-plugin": "0.9.0",
    "npm": "^6.14.2",
    "optimize-css-assets-webpack-plugin": "5.0.3",
    "pnp-webpack-plugin": "1.6.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "8.0.1",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "4.0.1",
    "prop-types": "^15.7.2",
    "pure-react-carousel": "^1.26.1",
    "react": "^16.12.0",
    "react-alert": "^6.0.1",
    "react-alert-template-basic": "^1.0.0",
    "react-app-polyfill": "^1.0.6",
    "react-audio-player": "^0.11.1",
    "react-bootstrap": "^1.0.0-beta.17",
    "react-bootstrap-carousel": "^4.0.3",
    "react-dev-utils": "^10.2.0",
    "react-dom": "^16.12.0",
    "react-geocode": "^0.2.1",
    "react-google-autocomplete": "^1.1.2",
    "react-google-maps": "^9.4.5",
    "react-h5-audio-player": "^2.4.2",
    "react-image-appear": "^1.2.23",
    "react-loading-image": "^0.5.0",
    "react-redux": "^7.2.0",
    "react-reveal": "^1.2.2",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scroll": "^1.7.9",
    "react-select": "^3.1.0",
    "react-slick": "^0.23.1",
    "react-transition-group": "^4.3.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "resolve": "1.15.0",
    "resolve-url-loader": "3.1.1",
    "sass-loader": "8.0.2",
    "semver": "6.3.0",
    "slick-carousel": "^1.8.1",
    "style-loader": "0.23.1",
    "styled-components": "^5.0.1",
    "terser-webpack-plugin": "2.3.4",
    "ts-pnp": "1.1.5",
    "typescript": "^3.7.5",
    "url-loader": "2.3.0",
    "webpack": "4.41.5",
    "webpack-dev-server": "3.10.2",
    "webpack-manifest-plugin": "2.2.0",
    "workbox-webpack-plugin": "4.3.1"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },
  "eslintConfig": {
    "extends": "react-app",
    "parser": "babel-eslint",
    "parserOptions": {
     "ecmaFeatures": {
       "legacyDecorators": true
     }
   }
  },
  "browserslist": {
    "production": [
      "&gt;0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "roots": [
      "<rootDir&gt;/src"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "setupFilesAfterEnv": [],
    "testMatch": [
      "<rootDir&gt;/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir&gt;/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jest-environment-jsdom-fourteen",
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir&gt;/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir&gt;/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir&gt;/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "modulePaths": [],
    "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"
    ],
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.10.1"
  }
}
```

I added the proposed lines under babel. However the same issue still appears.

Comment: please post your .babelrc (or equivalent) config


Here is another answer: You posted a code to configure, a static code linter called "eslint". But i dont think your error is related. 

I think your error is related to transpiling your code.

So in case you are using babel to transpile your code.

This is what you need to add in your .babelrc file for it to work, and of course install the needed dependency @babel/plugin-proposal-decorators

```    "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      } 
    ],   
],
```

in any case, the code you posted need to go into .eslintrc file, but its important only if are using eslint. And even if eslint throws an this error you can disable it by just adding 

```/* eslint-disable */ 
```

on the top of your code or just disabling it as a whole.

Comment for this answer: Thanks for the answer. One question, is it necassary to eject my Create React App in order to activate the the legacy option?
Comment for this answer: I'm not using RCA. (not yet anyway) But i don't think its relevant. First: you can provide babel settings inside package.json (heres how https://babeljs.io/docs/en/configuration#packagejson) and second its possible that once you have .babelrc present in your project RCA will merge its content into its own config (but im not sure ATM)

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2020:00:06/18/20', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<reactjs><babeljs><decorator>', 'Title': 'How to activate the legacyDecorators option in babel?', 'ViewCount': 1241, 'id': 62451595, 'user_AboutMe': '<ul>\n<li>Java Script / Type Script</li>\n<li>React</li>\n<li>React Native</li>\n<li>Redux/RTK/RTK Query</li>\n</ul>\n', 'user_AccountId': 17659235.0, 'user_DisplayName': 'dan_boy', 'user_Reputation': 1231.0, 'user_Views': 216.0, 'user_id': 12818045.0}}