I am trying to set up a React project that uses webpack and ESLint with the airbnb config for ESLint. When I try starting up the project with webpack dev server, I get the following error:
"Module build failed: Error: /react-template/node_modules/eslint-config-airbnb/rules/react-a11y.js: ESLint configuration is invalid: - Unexpected top-level property "ecmaFeatures"."
This is using eslint-config-airbnb v. 15.0.1. I checked the react-a11y.js file and confirmed there is a top-level property of "ecmaFeatures". I know as of ESLint 2.0.0 ecmaFeatures are now supposed to be under the parserOptions property, but I'm not sure if that only applies to the .eslintrc file. I'd like to use the airbnb config if possible, so I appreciate any assistance. Here is my .eslintrc file for reference.
.eslintrc
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2016,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true,
"jest": true
},
"extends": ["airbnb"]
}
I figured out a solution.
You have to edit react-a11y.js
and react.js
located in ./node_modules/.bin/eslint-config-airbnb/rules/
.
In react-a11y.js
remove:
ecmaFeatures: {
jsx: true
},
and replace it with:
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
In react.js
just remove:
ecmaFeatures: {
jsx: true
},
and you should be good to go.
Also, I'm looking at the airbnb's repo right now and it looks like they fixed it almost a month ago, but I just reinstalled eslint-config-airbnb today, so I'm not sure what happened there.
Here are links to the react-a11y.js diff and the react.js diff. They show exactly what you need to add/remove.
Global eslint has been upgraded from 3.19.0-1 to 4.0.0-1 when the problem appeared for me.
eslint
v4 is not yet supported ineslint-config-airbnb
andeslint-config-airbnb-base
https://github.com/eslint/eslint/issues/8726#issuecomment-308367541
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With