How to fix issue where I'm getting thousands of errors from prettier in my React App?

Question

I am encountering this issue where prettier is giving me in excess of 1000 errors. I'm not sure what is causing it however here is how I got to this issue. I followed TraversyMedias guide on youtube to install eslint and prettier with the airbnb template. It was working great. I programmed for close to a day with it. Then after I started switching a component I had from React hooks state to Redux state I got an error saying that a file couldn't be found. After I fixed the issue it still was coming up with this error. I restarted my dev server and got a different error entirely it was an issue with the version of eslint i had. I can't remember the specific error but it was something along these lines "The react-scripts package provided by Create React App requires a dependency: "eslint": "^7.11.0". " After I got that error I followed these steps To fix the dependency tree, try following the steps below in the exact order:

Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder. Delete node_modules in your project folder. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder. Run npm install or yarn, depending on the package manager you use.

after I did that I encountered the error I am asking the question about.

some useful information My project structure is a top level project folder. it contains both my server and client folder and all three have their own package.json.

I look on this forum for someone with an error similar to mine and couldn't find any. I googled many different worded questions about this issue and can't find anything on it. I uninstalled prettier to see if it would go away. it didn't here is what my package.json looks like in this order root folder client folder and server folder

{
  "name": "sac-website",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "concurrently \"cd server && npm run dev\" \"cd client && npm start\" "
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "concurrently": "^6.2.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^1.7.0"
  },
  "dependencies": {
    "eslint": "^7.28.0",
    "eslint-config-node": "^4.1.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.4.0"
  }
}
{
    "name": "sac-web",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@date-io/date-fns": "^1.3.13",
        "@material-ui/core": "^4.11.4",
        "@material-ui/icons": "^4.11.2",
        "@material-ui/lab": "^4.0.0-alpha.58",
        "@material-ui/pickers": "^3.3.10",
        "@material-ui/styles": "^4.11.4",
        "@reduxjs/toolkit": "^1.6.0",
        "@testing-library/jest-dom": "^5.12.0",
        "@testing-library/react": "^11.2.7",
        "@testing-library/user-event": "^12.8.3",
        "axios": "^0.21.1",
        "date-fns": "^2.22.1",
        "eslint": "^7.28.0",
        "prop-types": "^15.7.2",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-redux": "^7.2.4",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.3",
        "react-toastify": "^7.0.4",
        "redux": "^4.1.0",
        "redux-thunk": "^2.3.0",
        "web-vitals": "^0.2.4",
        "workbox-background-sync": "^5.1.4",
        "workbox-broadcast-update": "^5.1.4",
        "workbox-cacheable-response": "^5.1.4",
        "workbox-core": "^5.1.4",
        "workbox-expiration": "^5.1.4",
        "workbox-google-analytics": "^5.1.4",
        "workbox-navigation-preload": "^5.1.4",
        "workbox-precaching": "^5.1.4",
        "workbox-range-requests": "^5.1.4",
        "workbox-routing": "^5.1.4",
        "workbox-strategies": "^5.1.4",
        "workbox-streams": "^5.1.4"
    },
    "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"
        ]
    },
    "devDependencies": {
        "eslint-plugin-react": "^7.24.0"
    }
}

{
    "name": "server",
    "version": "1.0.0",
    "description": "The server for the sac website",
    "main": "index.js",
    "scripts": {
        "start": "node app.js",
        "dev": "nodemon app.js"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "bcrypt": "^5.0.1",
        "cors": "^2.8.5",
        "dotenv": "^10.0.0",
        "express": "^4.17.1",
        "jsonwebtoken": "^8.5.1",
        "mongoose": "^5.12.11"
    },
    "devDependencies": {
        "nodemon": "^2.0.7"
    }
}

Any help you guys could give me would be fantastic. And please pardon me if I asked this question wrong. It is my first time asking any question on a programming forum.

Answer 1

In a React 17 project I wanted to run, there were 2 .ignore files: .prettierignore and .eslintignore.

I added the src folder to these files and with that the errors disappeared.

This way you don't have to remove everything, and you can leave it to address it at a later time if you want.

Answer 2

The error I was getting had something to do with how eslint was set up or how prettier was set up. I deleted everything that was related to that and now the project is working.