Eslint: "jsx-a11y/label-has-for" is invalid - eslint

Question

In WebStorm, I cannot get rid of this error:
Error: /Users/kamiranoff/dev/myApp/node_modules/eslint-config-rallycoding/rules/react-a11y.js:
Configuration for rule "jsx-a11y/label-has-for" is invalid:
Value ["label"] should be object.
Referenced from: /Users/kamiranoff/dev/myApp/node_modules/eslint-config-rallycoding/index.js
Referenced from: /Users/kamiranoff/dev/myApp/.eslintrc
Error: /Users/kamiranoff/dev/myApp/node_modules/eslint-config-rallycoding/rules/react-a11y.js:
Configuration for rule "jsx-a11y/label-has-for" is invalid:
Value ["label"] should be object.
Referenced from: /Users/kamiranoff/dev/myApp/node_modules/eslint-config-rallycoding/index.js
Referenced from: /Users/kamiranoff/dev/myApp/.eslintrc
at validateRuleOptions (/Users/kamiranoff/dev/myApp/node_modules/eslint/lib/config/config-validator.js:115:15)
at Object.keys.forEach.id (/Users/kamiranoff/dev/myApp/node_modules/eslint/lib/config/config-validator.js:155:9)
at Array.forEach (<anonymous>)
at validateRules (/Users/kamiranoff/dev/myApp/node_modules/eslint/lib/config/config-validator.js:154:30)
at Object.validate (/Users/kamiranoff/dev/myApp/node_modules/eslint/lib/config/config-validator.js:232:5)
at loadFromDisk (/Users/kamiranoff/dev/myApp/node_modules/eslint/lib/config/config-file.js:507:19)
at load (/Users/kamiranoff/dev/myApp/node_modules/eslint/lib/config/config-file.js:550:20)
at configExtends.reduceRight (/Users/kamiranoff/dev/myApp/node_modules/eslint/lib/config/config-file.js:421:36)
at Array.reduceRight (<anonymous>)
at applyExtends (/Users/kamiranoff/dev/myApp/node_modules/eslint/lib/config/config-file.js:403:28)
I did try to override the local .eslintrc with:
{
"extends": "rallycoding",
"rules": {
"arrow-body-style": 0,
"quote-props": 0,
"global-require": 0,
"max-len": [
"error",
120
],
"react/require-extension": "off",
"jsx-a11y/label-has-for": 0
},
"globals": {
"__DEV__": true,
"fetch": true,
"Headers": true,
"Request": true
}
}
And setting up the WebStorm config (I just change the folder name for privacy):
And on my package.json
"dependencies": {
"as": "0.4.1",
"axios": "0.16.2",
"babel-plugin-transform-remove-console": "6.8.5",
"contentful": "4.6.4",
"eil-cid": "~1.0.0",
"eslint-config-rallycoding": "3.2.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "^7.10.0",
"listify": "1.0.0",
"localytics-react-native": "2.1.1",
"lodash": "4.17.5",
"lottie-react-native": "2.2.7",
"moment": "2.19.3",
"moment-timezone": "0.5.14",
"prop-types": "15.6.0",
"react": "16.0.0",
"react-dom": "16.2.0",
"react-native": "0.51.0",
"react-native-add-calendar-event": "0.3.0",
"react-native-calendars": "1.9.3",
"react-native-collapsible": "0.9.0",
"react-native-config": "0.8.1",
"react-native-dash": "^0.0.8",
"react-native-fabric": "0.5.1",
"react-native-firebase": "2.2.3",
"react-native-i18n": "2.0.9",
"react-native-iphone-x-helper": "1.0.1",
"react-native-keyboard-aware-scroll-view": "0.5.0",
"react-native-navigation": "1.1.462",
"react-native-picker": "4.3.5",
"react-native-showmedia": "file:packages/react-native-showmedia",
"react-native-swiper": "1.5.13",
"react-native-timeline-listview": "0.2.2",
"react-native-triangle": "0.0.8",
"react-native-webview-bridge": "github:EurostarDigital/react-native-webview-bridge",
"react-native-wkwebview-reborn": "1.10.0",
"react-redux": "5.0.6",
"redux": "3.7.2",
"redux-logger": "3.0.6",
"redux-persist": "4.10.2",
"redux-thunk": "2.2.0",
"tai-password-strength": "1.1.1"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "1.9.2",
"codecov": "3.0.0",
"dotenv": "4.0.0",
"eil-content": "~2.2.2",
"enzyme": "3.3.0",
"enzyme-adapter-react-16": "1.1.1",
"eslint": "4.11.0",
"google-spreadsheet": "2.0.4",
"husky": "0.14.1",
"jest": "20.0.4",
"lint-staged": "4.0.0",
"prettier": "~1.8.2",
"react-native-mock": "0.3.1",
"react-test-renderer": "16.0.0-alpha.12",
"redux-logger": "3.0.6",
"redux-mock-store": "^1.5.1"
},
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!react-native|react-navigation)/"
],
"setupFiles": [
"./config/testEnvironment.js"
],
"collectCoverageFrom": [
"src/**/*.js"
]
},
"lint-staged": {
"gitDir": "./",
"*.js": [
"prettier --single-quote --print-width 120 --tab-width 2 --write",
"./node_modules/eslint-config-rallycoding/node_modules/eslint/bin/eslint.js",
"git add"
]
}
How can I get rid of the error?

Answer 1

This issue is not specific to Webstorm, you will see the same errors when running EsLint in terminal. The problem is that "eslint-config-rallycoding" doesn't yet support v6.x of "jsx-a11y/label-has-for" plugin. You should probably file an issue to https://github.com/StephenGrider/ESLint-Rallycoding/issues on this.
The only way to get rid of the issue is downgrading both "eslint-plugin-jsx-a11y" and "eslint", like:
"eslint-plugin-jsx-a11y": "^2.2.3",
...
"eslint": "^3.19.0",
see https://github.com/sweth/react-native-udemy/commit/2dd74ca887e8b32b82ee1e37e5a290edaa657b82