Eslint in React not correcting errors

Question

I am working on a project that runs on node 10, "react": "^17.0.1". "react-scripts": "^4.0.1",

On each project start is shows many warnings, for example usage o == instead of ===, etc.

Here is part of the scripts, start original, the other 3 added by me trying to find a solution:

"scripts": {
    "start": "env-cmd -f .env.dev --use-shell \"react-scripts start\"",
    "lint": "eslint src --ext .js,.jsx",
    "lint:fix": "npm run lint -- --fix",
    "eslint": "eslint \"src/**/*.{js,jsx}\" --fix"
},

I wanted to run eslint to automatically fix warnings. I tried the commands:

eslint "src/**/*.{js,jsx}" --fix
npm run eslint;
npm run lint

No matter what command I run I get such error message: ✖ 312 problems (3 errors, 309 warnings)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] lint: `eslint src --ext .js,.jsx`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/myname/.npm/_logs/2022-04-14T12_48_51_948Z-debug.log

Or:

✖ 312 problems (3 errors, 309 warnings)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] lint: `eslint src --ext .js,.jsx "--fix"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/myname/.npm/_logs/2022-04-14T12_57_18_764Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] lint:fix: `npm run lint -- --fix`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] lint:fix script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/myname/.npm/_logs/2022-04-14T12_57_18_794Z-debug.log

in the package.json there is this info:

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

No eslink packages installed in package.json - is should be using the react-scripts embedded eslint.

Does anybody have a clue how to make eslint fix a plenty of warnings nobody cared about?

EDIT: Maybe this error appears after the list of warning, because in the middle there are also few errors such as:

here path to the file 10:41 error React Hook "useState" is called in function "betaBanner" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter react-hooks/rules-of-hooks

EDIT 2: Yes, after I manually corrected the two errors it now writes in yellow ✖ 309 problems (0 errors, 309 warnings) and the error at the end disappeared.

Answer 1

Sometimes reinstalling the node_modules fixes such issues for me.

These are the steps I follow:

Clean npm cache : npm cache clean --force

Delete the node_modules folder and package-lock.json file.

Do a fresh package install : npm install

Start project : npm start

For VS Code, you can try adding these settings in your VS Code settings.json

"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.tslint": true,
    "source.fixAll.stylelint": true
},