react-scripts build ignores ESLint overrides

[osdiab]

Bringing back #8266 as something that I'm experiencing now.

Describe the bug

I made a lint rule that applies everywhere but want to exclude it for a directory. ESLint supports the overrides option to achieve this but react-scripts build ignores that and applies the rule anyway with EXTEND_ESLINT=true option

Did you try recovering your dependencies?

irrelevant

Which terms did you search for in User Guide?

extend eslint overrides lint

Environment

Environment Info:

  System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz
  Binaries:
    Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.14.1/bin/npm
  Browsers:
    Chrome: 80.0.3987.149
    Firefox: 74.0
    Safari: 13.0.5
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Make a CRA app
2. add EXTEND_ESLINT=true to your invocation of react-scripts
3. Make an ESLint file with a rule, and an override for that rule in with the overrides property
4. Make a file that breaks the rule but should be overridden
5. run react-scripts dev or react-scripts build and see that CRA complains anyway

Expected behavior

It respects the rule

Actual behavior

It doesn't

[osdiab]

Workaround was to include separate .eslintrc.js files that aren't the base one, for the subdirectories that I wanted to configure. But it's clunky and confusing. Nevermind, I spoke too soon. That didn't work either, still complains

[marovargovcik]

Can confirm. Overriding rules has no effect. Went back to 3.4.0 and it works as expected.

[nickretallack]

Issue #8266 was fixed in 3.4.1. The problem was that it was only checking the eslint overrides that would be applied to index.js and then applying them to the whole project. It now supports eslint overrides properly.

However, I have seen the issue you're describing. I've seen it work and I've seen it not work. Through fiddling with patchingreact-scripts/config/webpack.config.js I've come to discover that the problem is caused by the cache: true setting. If you do a build, then change your .eslintrc file and do another build, you'll just get back the same lint errors which are now incorrect. I'm not entirely sure where eslint is caching this stuff but it sure is annoying.

[saileshkotha]

@nickretallack I discovered the same today in 3.4.1. I've tested and confirming that changing cache: true to cache: false fixed it and using .eslintrc file as expected.

Going back to 3.4.0 for now.

Waiting for someone from community to confirm on this issue.

[sandeep-git-hub]

@nickretallack I discovered the same today in 3.4.1. I've tested and confirming that changing cache: true to cache: false fixed it and using .eslintrc file as expected.

Going back to 3.4.0 for now.

Waiting for someone from community to confirm on this issue.

Hi @nickretallack @saileshkotha

I tried changing it to false by manually editing it in node_modules/react-scripts/config/webpack.config.js. But when trying to run eslint it reverts the changes in .prettierrc and .eslintconfig.json, runs the lint and then reverts the changes. I am using VSCode.

[lswest]

Issue #8266 was fixed in 3.4.1. The problem was that it was only checking the eslint overrides that would be applied to index.js and then applying them to the whole project. It now supports eslint overrides properly.

However, I have seen the issue you're describing. I've seen it work and I've seen it not work. Through fiddling with patchingreact-scripts/config/webpack.config.js I've come to discover that the problem is caused by the cache: true setting. If you do a build, then change your .eslintrc file and do another build, you'll just get back the same lint errors which are now incorrect. I'm not entirely sure where eslint is caching this stuff but it sure is annoying.

Same issue here. What I am curious about is what caused the regression between 3.4.0 and 3.4.1. Looking at the PRs quoted in the release notes, I don't see anything that should have changed the behaviour of caching. At the moment, I'm holding on 3.4.0.

As for where eslint caches the files:
According to the eslint-loader docs using cache: true sets the path to ./node_modules/.cache/eslint-loader. I can confirm the the folder exists and is populated.

[nickretallack]

@lswest

I'm no expert, but my guess is that the issue was introduced by this change.

The problem is that it's not busting the eslint cache when you change your .eslintrc file. I haven't checked if this is a problem in vanilla eslint.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.