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
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.