How to activate the legacyDecorators option in babel?

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": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "roots": [
      "<rootDir>/src"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "setupFilesAfterEnv": [],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jest-environment-jsdom-fourteen",
    "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)$"
    ],
    "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.

Answer 1

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.