Eslint --fix not working on a fresh CRA v4 app

[amcsi]

Describe the bug

Running eslint --fix <filename> does not automatically fix the problems on a fresh CRA v4.0.3 app.

(Also in PhpStorm/WebStorm, the option for Run eslint --fix on save. does not work, unlike with CRA v3. This is perhaps related.)

Did you try recovering your dependencies?

The app is fresh.

Which terms did you search for in User Guide?

Eslint

Environment

Environment Info:

  current version of create-react-app: 4.0.3
  running from /home/attila/.npm/_npx/1202486/lib/node_modules/create-react-app

  System:
    OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v10.15.1/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.1/bin/npm
  Browsers:
    Chrome: 88.0.4324.150
    Firefox: 85.0.1
  npmPackages:
    react: ^17.0.1 => 17.0.1 
    react-dom: ^17.0.1 => 17.0.1 
    react-scripts: 4.0.3 => 4.0.3
  npmGlobalPackages:
    create-react-app: Not Found

(paste the output of the command here.)

Steps to reproduce

1. Clone this repo: https://github.com/amcsi/react-app-eslint-fix-not-working-example
2. Run yarn to install the dependencies.
3. Run eslint --fix -- src/App.tsx

Expected behavior

The file should be fixed: hey should be added to the list of the useEffect() dependencies. Also I believe the output of the command should be silent.

Actual behavior

The file did not get fixed. Also I get this non-silent output:

attila-Predator :: 0/quick/react-app-typescript-2021 ‹master› % eslint --fix -- src/App.tsx                                                                                             

/home/attila/0/quick/react-app-typescript-2021/src/App.tsx
  9:6  warning  React Hook useEffect has a missing dependency: 'hey'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

✖ 1 problem (0 errors, 1 warning)

Reproducible demo

https://github.com/amcsi/react-app-eslint-fix-not-working-example

[amcsi]

I was happy to hear that a different eslint related ticket (#10509) was fixed with version 4.0.3.

But sadly, version 4.0.3 did not fix this issue. I have updated the issue to reflect this.

[javanoclaw]

me too

[amcsi]

I'm closing this issue, because it turns out that this is intentional, and not a bug.

facebook/react#18235 (comment)

Basically they made it so react-hooks/exhaustive-deps does not autofix anymore by default.

The way you can get it to work again is by making sure you have this in your eslint config. In the case of package.json, ensure you have this rule:

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