ESLint failed to load config "react-app" to extend from.

[paupaugoz]

I was recently working on a project and used create-react-app.

I don't have eslint installed globally, and only configure ESLint on a project-by-project basis.

Steps done to install ESLint on VSCode

1. npx create-react-app
2. installed on VSCode
3. npm install eslint on local root folder
4. run ESLint --init locally through node_modules

Here is my .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    'airbnb',
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
  },
};

And my package.json:

{
  "name": "elder-tree-dashboard",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.4.0",
    "@material-ui/icons": "^4.2.1",
    "aws-amplify": "^1.1.38",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint": "^6.3.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.14.3",
    "eslint-plugin-react-hooks": "^1.7.0"
  }
}

I'm not sure if it's specific to version 6.x of ESLint, but I've checked my other projects using version 5.x and they seem to be working fine on VSCode. As far as I remember, I did the same steps in installing ESLint.

This error is output:

[Error - 3:16:06 PM] ESLint stack trace:
[Error - 3:16:06 PM] Error: Failed to load config "react-app" to extend from.
Referenced from: C:\Users\Paulo\Documents\package.json
    at configMissingError (c:\Users\Paulo\Documents\GitHub\elder-tree-dashboard\node_modules\eslint\lib\cli-engine\config-array-factory.js:233:9)
    at ConfigArrayFactory._loadExtendedShareableConfig (c:\Users\Paulo\Documents\GitHub\elder-tree-dashboard\node_modules\eslint\lib\cli-engine\config-array-factory.js:712:23)
    at ConfigArrayFactory._loadExtends (c:\Users\Paulo\Documents\GitHub\elder-tree-dashboard\node_modules\eslint\lib\cli-engine\config-array-factory.js:617:25)
    at ConfigArrayFactory._normalizeObjectConfigDataBody (c:\Users\Paulo\Documents\GitHub\elder-tree-dashboard\node_modules\eslint\lib\cli-engine\config-array-factory.js:547:25)
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at ConfigArrayFactory._normalizeObjectConfigData (c:\Users\Paulo\Documents\GitHub\elder-tree-dashboard\node_modules\eslint\lib\cli-engine\config-array-factory.js:491:20)
    at _normalizeObjectConfigData.next (<anonymous>)
    at createConfigArray (c:\Users\Paulo\Documents\GitHub\elder-tree-dashboard\node_modules\eslint\lib\cli-engine\config-array-factory.js:307:25)
    at ConfigArrayFactory.loadInDirectory (c:\Users\Paulo\Documents\GitHub\elder-tree-dashboard\node_modules\eslint\lib\cli-engine\config-array-factory.js:400:16)
    at CascadingConfigArrayFactory._loadConfigInAncestors (c:\Users\Paulo\Documents\GitHub\elder-tree-dashboard\node_modules\eslint\lib\cli-engine\cascading-config-array-factory.js:304:46)

I have tried deleting node_modules, package_lock and package.json and doing a clean install of ESLint, but it seems that the problem is specific to this project.

[dbaeumer]

This looks like a ESLint 6.0 issue. See #696 for a lengthly discussion about ESLint 6.x issues, especially #696 (comment) on how to make it work.

Please ping if this doesn't solve your issue.