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 · Accepted Answer · 2017-06-15 19:02:33Z

20

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.

edited Jun 15, 2017 at 19:02

answered Jun 15, 2017 at 18:55

gucciferXCIV

5085 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

darin Over a year ago

Great, yeah I figured it might need to be refactored to use parserOptions. Thanks!

Abel · Accepted Answer · 2017-06-14 14:59:26Z

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

answered Jun 14, 2017 at 14:59

Abel

516 bronze badges

Comments

daskel · Accepted Answer · 2017-06-13 21:05:12Z

0

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

answered Jun 13, 2017 at 21:05

daskel

881 silver badge10 bronze badges

1 Comment

darin Over a year ago

Yup, sorry about that, was actually an issue in the copy I posted here on Stack Overflow, but it is good in the file and the issue still persists :-/

Collectives™ on Stack Overflow

ESLint "Module build failed" error with eslint-config-airbnb

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related