ESLint error - ESLint couldn't find the config "react-app"

user_8919065 0
Viewed 36193

Me with my team, start a new React Project using the create-react-app bootstrap command. We add the eslint section on the project but we stuck with annoying error that we never found it before now. When we launch the command 

 yarn run lint

Here the error: enter image description here

Here the package.json:

{
  "name": "name of the app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jwt-decode": "^2.2.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-intl": "^3.12.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "redux": "^4.0.5",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0",
    "styled-components": "^5.0.1"
  },
  "scripts": {
    "analyze": "react-app-rewired build",
    "build": "react-scripts build",
    "cypress": "./node_modules/.bin/cypress open",
    "eject": "react-scripts eject",
    "lint:write": "eslint --debug src/ --fix",
    "lint": "eslint --debug src/",
    "prettier": "prettier --write src/*.tsx src/*.ts src/**/*.tsx src/**/*.ts src/**/**/*.tsx src/**/**/*.ts src/**/**/**/*.tsx src/**/**/**/*.ts src/**/**/**/**/*.tsx src/**/**/**/**/*.ts",
    "start": "react-scripts start",
    "storybook": "start-storybook -p 6006 -c .storybook",
    "test": "react-scripts test",
    "upgrade:check": "npm-check",
    "upgrade:interactive": "npm-check --update"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "lint-staged": {
    "*.(ts|tsx)": [
      "yarn run prettier"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@cypress/webpack-preprocessor": "^4.1.2",
    "@storybook/addon-actions": "^5.3.12",
    "@storybook/addon-info": "^5.3.12",
    "@storybook/addon-knobs": "^5.3.12",
    "@storybook/addon-links": "^5.3.12",
    "@storybook/addons": "^5.3.12",
    "@storybook/preset-create-react-app": "^1.5.2",
    "@storybook/react": "^5.3.12",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/jwt-decode": "^2.2.1",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.7",
    "@types/react-router": "^5.1.4",
    "@types/react-router-dom": "^5.1.3",
    "@types/storybook__addon-knobs": "^5.2.1",
    "@types/styled-components": "^4.4.2",
    "cypress": "^4.0.1",
    "eslint": "^6.8.0",
    "husky": "^4.2.1",
    "lint-staged": "^10.0.7",
    "npm-check": "^5.9.0",
    "prettier": "^1.19.1",
    "react-app-rewire-webpack-bundle-analyzer": "^1.1.0",
    "react-app-rewired": "^2.1.5",
    "react-docgen-typescript-webpack-plugin": "^1.1.0",
    "redux-devtools-extension": "^2.13.8",
    "storybook-addon-jsx": "^7.1.14",
    "ts-loader": "^6.2.1",
    "typescript": "~3.7.2",
    "webpack": "^4.41.6",
    "webpack-bundle-analyzer": "^3.6.0"
  }
}

We also tried to add create a .eslintrc file and add 

{
  "extends": "react-app"
}

But nothing change.

create-react-app eslint typescript reactjs javascript
7 Answers

react-scripts should already include ESLint and the eslint-config-react-app ESLint config (see docs) in your Node dependencies.

You don’t need to install it separately in Create React App projects.

If ESLint is not able to find the react-app config, there are likely conflicting or duplicate ESLint config dependencies that were installed outside of react-scripts (i.e. another eslint-config-react-app installation). You can check by using the npm ls [package] command (i.e. npm ls eslint-config-react-app).

Probably the best way to approach this is to remove those packages from package.json to allow the configs like eslint-config-react-app in react-scripts to be used as intended (based on comment) . If the problem persists after that, try removing the node_modules folder and package-lock.json and then reinstalling the dependencies again may work. Otherwise, upgrading to a newer npm version may make a difference.

Old Answer:

Your package.json is likely missing the peer dependency eslint-config-react-app which includes the eslint preset react-app. You will need to follow the instructions to install it here https://www.npmjs.com/package/eslint-config-react-app.

Note: Even though this is create-react-app which bundles it for react-scripts, your lint script was not able to access react-app.

"eslintConfig": {
      "extends": "react-app"   
}

About .eslintrc, you already have the config for ESLint in your package.json so you should be safe to remove .eslintrc.

user_81093190

The problem here is with the yarn package manager. Because eslint-config-react-app is not under the node_modules directly and it's inside the react-scripts: node_modules\react-scripts\node_modules yarn has not load that correctly (more information here)

So, currently, there are 2 options to resolve that issue:

  1. using npm instead of yarn.
  2. install eslint-config-react-app package in addition to the one we have inside react-scripts.
user_44610560

I solved this problem by using npm install instead of yarn.

Not sure why but I guess it's because yarn install multiple packages at a time while npm installs them one after the other. So maybe some of them are skipped or not installed properly.

user_90990770

SOLVED!

I solve changing my lint script:

Old this:

"lint": "eslint --debug src/"

New to this: 

"lint": "eslint --debug 'src/**/*.{js,jsx,ts,tsx}'",
user_89190650

Removing pre-commit file from .git/hooks resolved my issue.

user_49681870

I was using yarn, I solved this by reinstall vscode and downgrade eslint to 7.32

user_53388290

If you don't use React in your project just add this in .eslintrc.js:

{
   root: true,
}
user_127099200
Related