Using a custom ESLint version in Create React App

I'm maintaining my own ESLint rules for all my projects. With Create React App (CRA), custom configuration is always a hassle (by design). Custom rules are usually fine, unless the ESLint peer dependency version doesn't support them yet:

react-scripts build

Creating an optimized production build...
Failed to compile.

src/common/api.ts
  Definition for rule 'react/jsx-no-constructed-context-values' was not found   react/jsx-no-constructed-context-values
  Definition for rule 'no-unsafe-optional-chaining' was not found               no-unsafe-optional-chaining

I thought defining a recent version of ESLint in package.json will solve the issue of rules not being found, but react-scripts doesn't pick it up:

"devDependencies": {
  "eslint": "7.17.0",
},

Finally, with Yarn resolutions, I was able to override (peer) dependency versions:

"resolutions": {
  "eslint": "7.17.0",
  "eslint-plugin-react": "7.22.0"
},

With npm@8.3.0 it might be possible to achieve the same result using overrides, but I haven't tried it:

{
  "overrides": {
    "eslint": "7.17.0",
    "eslint-plugin-react": "7.22.0"
  }
}

Bonus tip: As of CRA version 4.0.0, react-scripts build (and react-scripts start) run eslint implicitly, which sounds like a strange decision. As of version 4.0.2, you can disable this behavior by adding DISABLE_ESLINT_PLUGIN to your .env file.