eslint Failed to load config "react-app" to extend from. when making changes in project

Question

I created a react app using yarn create react-app. Then I run yarn start and the project run properly on localhost. However, when I make an edit to a file (add a new tag, rename contents of a div..) the app throws an error and fails to compile with the error

[eslint] Failed to load config "react-app" to extend from.

Eslint is already installed. The crazy thing is, opening the package.json file and saving it solves the issue and the project compiles with the new changes. However I'd have to do this every time I make a change.

I am using Ubuntu on WSL .

Here is my package.json file

{
  "name": "gmail-clone",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.1",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.0.1",
    "@testing-library/user-event": "^14.1.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

A few ways to solve the issues:

1. Add the eslint-config-react-app

   yarn add eslint-config-react-app -D OR yarn add eslint-config-react -D

2. Remove this code from package.json

"extends": [
         "react-app"
       ]
     },

3. Remove yarn.lock and reinstall node modules.