ESLint “Module build failed” error with eslint-config-airbnb

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

gucciferXCIV gucciferXCIV · Accepted Answer · 2017-06-15T18:55:51

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.

ESLint “Module build failed” error with eslint-config-airbnb

3 Answers