Create-react-app: 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[bot]]

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.

[shide1989]

same issue. i have an eslintrc.js file and the production build totaly ignores it

[joshSummerhays]

same here

[AlaaZorkane]

Production build ignores .eslintrc even with cache set to false in the webpack configuration.

[shide1989]

Any news on this thread ? this bug is present since react-scripts 3.4.1. It's a shame it hasn't been fixed yet.

[nstrelow]

still same issue on 3.4.3

[fkirc]

Adding additional eslintrc.json/js in subdirectories does not work either.

This issue is especially painful in CI pipelines.
On one hand, failing to respect ESLint overrides can lead to lots of warnings.
On the other hand, warnings are treated as errors _only_ on CI pipelines: https://github.com/facebook/create-react-app/issues/3657
Ironically, https://github.com/facebook/create-react-app/issues/3657 has been locked as "resolved".
Therefore, my workaround is to build on CI with CI=false.

I strongly disagree with discrepancies between CI errors and local errors, but this is another story.
If a build fails on CI, then it should also fail locally. In other words, if something is "suspicious", then it should either fail as fast as possible or not fail at all.
Everything else is just a waste of time because developers wait for unnecessary CI failures.

[ievgennaida]

Cannot override any of the @typescript-eslint properties.
I am having warning during npm run start when executed on Windows.

"start": "set EXTEND_ESLINT=true && react-scripts --max_old_space_size=4096 start",

versions:

"react-scripts": "3.4.3"
eslint v7.9.0
"@typescript-eslint/eslint-plugin": "4.1.1",
"@typescript-eslint/parser": "4.1.1",

I have in the packages json:

``` "eslintConfig": {
"extends": ["react-app", "shared-config"],
"rules": {
"@typescript-eslint/no-use-before-define": "off",
"@typescript-eslint/no-unused-vars": "off"
},
"overrides": [
{
"files": [
"*/.ts?(x)"
],
"rules": {
"@typescript-eslint/no-use-before-define": "off",
"@typescript-eslint/no-unused-vars": "off"
}
}
]
},

Also I have tried to apply setting by changing .eslintrc.json:

{
"env": {
"browser": true,
"es2020": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 11
},
"plugins": ["react", "@typescript-eslint"],
"rules": {
"react/jsx-no-bind": [
"error",
{
"allowArrowFunctions": true,
"allowBind": false,
"ignoreRefs": true
}
],
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/no-unused-vars": "off",
"no-redeclare": "off",
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": "off",
"react/jsx-filename-extension": [
1,
{ "extensions": [".js", ".jsx", ".ts", ".tsx"] }
]
},
"overrides": [
{
"files": ["*/.ts?(x)"],
"rules": {
"@typescript-eslint/no-use-before-define": "off"
}
}
],
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
},
"react": {
"version": "detect"
}
}
}
```

But @typescript-eslint/no-unused-vars" are still ignored.
Warnings are displayed during the startup.

[afshin-hoseini]

I have the same issue ☹️

[cain-wang]

It's been half a year. Hope this will be prioritized soon.

[Badbreaddead]

Still happens to me on 3.4.3
Any update on this issue?

[jaydlawrence]

This helped me:
https://stackoverflow.com/a/59249839

I set EXTEND_ESLINT=true in my .env file and suddenly all the linting issues that I had told it to ignore disappeared from my build log.

[evgar]

Still happens to me

[dirkvanvugt]

This will probably fix it https://github.com/facebook/create-react-app/pull/9751.

I ran a test project according to the contribution.md and that works as expected in regard to eslintrc and eslintignore.

[saileshkotha]

@ianschmitz updated react-scripts to 4.0.0 and tested in my project. With zero configuration changes, it is using .elintrc.json file.

This can be closed.