Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Extending ESLint config not working

See original GitHub issue

Describe the bug

Extending ESLint config not working.

Environment

  System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
  Binaries:
    Node: 8.15.0 - ~/.nvm/versions/node/v8.15.0/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v8.15.0/bin/npm
  Browsers:
    Chrome: 76.0.3809.100
    Firefox: 67.0
    Safari: 12.1.2
  npmPackages:
    react: ^16.9.0 => 16.9.0
    react-dom: ^16.9.0 => 16.9.0
    react-scripts: 3.1.0 => 3.1.0
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

yarn create react-app testapp (or npx create-react-app testapp)
cd testapp
yarn add eslint-config-airbnb (or npm install eslint-config-airbnb)
Add the following to package.json:

"eslintConfig": { "extends": [ "react-app", "airbnb"] }

EXTEND_ESLINT=true yarn start ( or EXTEND_ESLINT=true npm start)

Expected behavior

eslint-config-airbnb should be used
app should not compile

Actual behavior

eslint-config-airbnb is not used
app compiles (it shouldn’t!)

Problem

webpack.config.js checks thateslintConfig.extends exists: https://github.com/facebook/create-react-app/blob/c0b4173d1bba37fde2d699fe9914d16f823bcbe5/packages/react-scripts/config/webpack.config.js#L355 and – if it does – that it includes 'react-app': https://github.com/facebook/create-react-app/blob/c0b4173d1bba37fde2d699fe9914d16f823bcbe5/packages/react-scripts/config/webpack.config.js#L356

It seems that the property extends never exists on eslintConfig(??)

Deleting the above two lines yields the expected behavior (eslint-config-airbnb is picked up and we see lint errors / Failed to compile message)

Issue Analytics

State:
Created 4 years ago
Reactions:7
Comments:8 (4 by maintainers)

Top GitHub Comments

3reactions

HerbCaudillcommented, Aug 11, 2019

I’m guessing that prior to version 6, ESLint included the extends property in the config output. This code, which is new in ESLint 6, explicitly omits it.

https://github.com/eslint/eslint/blob/fbec99ea3e39316791685652c66e522d698f52d8/lib/cli-engine/config-array-factory.js#L559-L578

2reactions

conor-cafferkey-sociomanticcommented, Aug 12, 2019

How about checking for the extends in package.json? Would that work?

Top Results From Across the Web

Configuration Files - ESLint - Pluggable JavaScript Linter

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

ESLint extend error : Failing to load config - Stack Overflow

Having eslintrc.json in the project root shouldn't be a problem. ... If eslint-config-airbnb-base isn't in package.json , try to install it:.

eslint couldn't find the config "react-app" to extend from

The problem is this: ESLint is looking for the eslint-plugin-react plugin in workdir and not in the root-project-dirictory. If eslint-plugin-react is included ...

VS Code ESLint extension - Visual Studio Marketplace

eslintrc configuration file. You can do this by either using the VS Code command Create ESLint configuration or by running the eslint command...

How to configure ESLint and Prettier in React - Imaginary Cloud

After installing @imaginary-cloud/eslint-config-react configuration, add the next two lines to the package.json file