使用eslint-config-airbnb ESLint“模块构建失败”错误

Question

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"]
}

Answer 1

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.

Answer 2

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 in eslint-config-airbnb and eslint-config-airbnb-base

https://github.com/eslint/eslint/issues/8726#issuecomment-308367541

Answer 3

You JSON isn't valid. It's missing quotes around first "parser";

{
  "parser": "babel-eslint",
  "parserOptions": {
  "ecmaVersion": 2016,
  "sourceType": "module",
   "ecmaFeatures": {
  "jsx": true
 }
},
  "env": {
  "es6": true,
  "browser": true,
  "node": true,
  "jest": true
 },
 "extends": ["airbnb"]
}