ESLint 错误 - ESLint 找不到配置“react-app”

Question

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:

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.

Answer 1

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 (ie another eslint-config-react-app installation). You can check by using the npm ls [package] command (ie 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 .

Answer 2

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 .

Answer 3

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.

Answer 4

从.git/hooks 中删除预提交文件解决了我的问题。

Answer 5

SOLVED!

I solve changing my lint script:

Old this:

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

New to this:

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

Answer 6

我正在使用纱线，我通过重新安装 vscode 并将 eslint 降级到 7.32 解决了这个问题

Answer 7

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

{
   root: true,
}