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! company@1.0.0 lint: `eslint src --ext .js,.jsx`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the company@1.0.0 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! company@1.0.0 lint: `eslint src --ext .js,.jsx "--fix"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the company@1.0.0 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! company@1.0.0 lint:fix: `npm run lint -- --fix`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the company@1.0.0 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.

same error: `npm ERR! company@1.0.0 lint: `eslint src --ext .js,.jsx "--fix"`` — Pikk, Apr 14 '22 at 13:11
Do the answers [here](https://stackoverflow.com/questions/40271230/how-to-run-eslint-fix-from-npm-script) help? — samuei, Apr 14 '22 at 13:13

PR7 · Answer 1 · 2022-04-14T13:58:43.203

0

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
},

edited Apr 14 '22 at 13:58

answered Apr 14 '22 at 13:22

PR7

1,524
1
13
24

I added an EDIT at the bottom of the question, not sure if that error appears because eslint throws also few errors not only warnings... just wondering – Pikk Apr 14 '22 at 13:40
I think you need to fix the React hooks warnings that you mentioned in the edit. Those are important for `React's` internal working. From the edit you added, I am assuming that you are using `useState` in a Class component, which is not allowed. You can only use hooks in functional components or other hooks. – PR7 Apr 14 '22 at 13:49
Thank you yes. Now the error disappeared, but still the commands to fix warnings are not working. The same warnings keep reappearing – Pikk Apr 14 '22 at 13:51
I've updated my answer and added some settings for VS Code which you can try. This might fix you issue. – PR7 Apr 14 '22 at 13:59

score 0 · Answer 2 · answered Sep 04 '22 at 19:48

Add this config to your .eslintrc configuration file

"react-hooks/exhaustive-deps": [
       "warn",
        {
          "enableDangerousAutofixThisMayCauseInfiniteLoops": true
        }
      ]

Read more about the issue here https://github.com/facebook/react/issues/18235#issuecomment-898636301

Eslint in React not correcting errors

2 Answers2