Make webpack use .eslintrc.json in ejected CRA (recent)

[svenhorner]

You find multiple suggestions on how to do it, but all seem outdated or I am missing something else.

We want the webpackDevServer (npm start) to log the same errors and warnings as npx eslint src/ does. We have an .eslintrc.json in the root of our project. So we need webpack to pick it up. When I added an .eslintrc.json in an unejected CRA project, it seemed to pick it up:

Not so in the ejected one though. It always looks like this:

I tried adding

• EXTEND_ESLINT=true to npm start in the package.json
• pasting the same config as defined in the .eslintrc.json in new ESLintPlugin({baseConfig: ...}) in the config/webpack.config.js
• various combinations of commenting out or changing options in the new ESLintPlugin in the config/webpack.config.js
• putting the .eslintrc.json in /src, /config, etc.
• probably something else and different combinations of the above. Of course I searched the whole internet within 2 hours of trying to solve this.
• This SO thread covers the underlying problem, but doesn't have a solution for what we want to do, as it suggests to
  • either disable linting through webpack completely
  • or overwriting the CRA esLintConfig just like in the current documentation of CRA: https://create-react-app.dev/docs/setting-up-your-editor/#extending-or-replacing-the-default-eslint-config. It is not explicitely stated where to change it, but the only place where I find a "esLintConfig" object is in the package.json, and putting the rules from our .eslintrc.json there didn't do the trick either.

So basically there is no documentation on how to achieve it. My hope that someone out there also recently had to deal with this and found a solution? Would be awesome, if you could share it then!

(Seems like the ejected version of create-react-app's result is a bit broken at the moment. Using .env files throws errors in the react-scripts as well at the momemt, but that's another story.)