Preventing ESLint “no-undef” on ReactJS arrow-function class properties

Question

I'm trying to get @babel/plugin-proposal-class-properties to work with @babel/eslint-parser and ESLint. I have lots of class methods written like this:

class MyClass extends PureComponent {
  ...
  someProperty = () => { ... } // < ESLint: 'someProperty' is not defined.(no-undef)
  ...
}

And they do work and the code does run. Except ESLint still considers them erroneous.

I know this question has already been asked several times (such as here ) but I've been stuck for days and none of the answers seem to be helping.

My .eslintrc file:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "airbnb"
  ],
  "parser": "@babel/eslint-parser", // < I do use the babel parser
  "parserOptions":{
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true
    },
    "babelOptions": {
      "plugins": [
        "@babel/plugin-proposal-class-properties" // < tried putting my plugin here
      ]
    }
  },
  "plugins": [
    "react",
    "jsx-a11y",
    "import",
    // "@babel" < "ESLint: Error: Failed to load plugin @babel: Cannot find module 'eslint-plugin-@babel'"
  ],
  "rules": {
    "react/jsx-filename-extension": 0,
    "no-plusplus": 0,
    "comma-dangle": [2, "never"],
    "indent": ["error", 2, { "SwitchCase": 1 }],
    "react/jsx-indent": ["error", 2],
    "react/jsx-indent-props": ["error", 2],
    "max-len": [2, 300],
    "semi": [2, "never"],
    "no-underscore-dangle": 0,
    "no-script-url": 0,
    "no-extend-native": ["error", { "exceptions": ["String"] }],
    "no-restricted-syntax": ["error", "ForOfStatement", "LabeledStatement", "WithStatement"],
    "import/no-unresolved": [2, { "ignore" : [ "electron" ] }]
  }
}

My babel.config.json file:

{
  "presets": [["@babel/preset-env", { "modules": false }], "@babel/preset-react"],
  "plugins": [
    "babel-plugin-add-module-exports",
    "babel-plugin-async-to-promises",
    "babel-plugin-syntax-async-functions",
    "@babel/plugin-proposal-function-bind",
    "@babel/plugin-transform-modules-commonjs",
    "@babel/plugin-proposal-class-properties"
  ],
  "env": {
    "production": {
      "presets": ["react-optimize"],
      "plugins": [
        "babel-plugin-transform-remove-console",
        "babel-plugin-transform-remove-debugger",
        "babel-plugin-dev-expression"
      ]
    },
    "dev": {
      "presets": []
    },
    "test": {
      "plugins": [
        ["webpack-loaders", { "config": "webpack.config.node.js", "verbose": false }]
      ]
    }
  }
}

Package versions:

@babel/core: 7.12.10
@babel/eslint-parser: 7.12.1
@babel/eslint-plugin: 7.12.1
@babel/plugin-proposal-class-properties: 7.12.1
eslint: ^3.19.0

Answer 1

In case anyone runs into this issue, I ended up updating eslint to its latest version (7.18.0 at the time) and my problem was gone.