react-scripts build ignores ESLint overrides #8683

osdiab · 2020-03-21T05:11:03Z

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

Make a CRA app
add EXTEND_ESLINT=true to your invocation of react-scripts
Make an ESLint file with a rule, and an override for that rule in with the overrides property
Make a file that breaks the rule but should be overridden
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

The text was updated successfully, but these errors were encountered:

osdiab · 2020-03-21T05:52:48Z

~~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 · 2020-03-23T17:27:58Z

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

nickretallack · 2020-03-28T10:48:34Z

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 · 2020-03-29T14:56:38Z

@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 · 2020-04-02T03:47:04Z

@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 · 2020-04-02T11:12:39Z

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 · 2020-04-05T19:30:33Z

@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 · 2020-05-06T03:02:16Z

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.

Configure ESLint to ignore errors in the dragdroptouch library. We do this by turning on create-react-app's support for ESLint customization. This support is currently marked as "experimental" in the documentation (https://create-react-app.dev/docs/setting-up-your-editor/#experimental-extending-the-eslint-config). There is currently a caching issue in create-react-app that causes previous ESLint configurations to interfere with future runs. A workaround is to delete the 'node_modules/.cache/eslint-loader' directory. See: - facebook/create-react-app#8683 - https://webpack.js.org/loaders/eslint-loader/

shide1989 · 2020-08-04T12:54:58Z

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

joshSummerhays · 2020-08-06T17:01:08Z

same here

AlaaZorkane · 2020-08-18T10:43:01Z

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

shide1989 · 2020-09-04T13:58:39Z

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 · 2020-09-09T14:03:32Z

still same issue on 3.4.3

fkirc · 2020-09-17T12:35:26Z

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: #3657
Ironically, #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 · 2020-09-18T13:40:30Z

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:

    "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 · 2020-09-19T08:42:19Z

I have the same issue ☹️

cain-wang · 2020-09-23T02:05:08Z

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

Badbreaddead · 2020-09-24T16:02:05Z

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

jaydlawrence · 2020-10-01T16:58:50Z

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 · 2020-10-06T00:28:31Z

Still happens to me

dirkvanvugt · 2020-10-20T16:18:05Z

This will probably fix it #9751.

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

saileshkotha · 2020-10-24T21:01:49Z

@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.

osdiab added issue: bug report needs triage labels Mar 21, 2020

vincerubinetti mentioned this issue Mar 30, 2020

incorp greenelab eslint config greenelab/adage-frontend#128

Merged

stale bot added the stale label May 6, 2020

ianschmitz added this to the 4.1 milestone May 6, 2020

stale bot removed the stale label May 6, 2020

annalo added a commit to annalo/mdeck that referenced this issue Aug 13, 2020

downgrade react-scripts to 3.4.0 facebook/create-react-app#8683

12bdd01

alphastorm mentioned this issue Oct 26, 2020

Bump react-scripts from 3.4.4 to 4.0.0 saddle-finance/saddle-frontend#134

Closed

osdiab closed this as completed Oct 28, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

react-scripts build ignores ESLint overrides #8683

react-scripts build ignores ESLint overrides #8683

osdiab commented Mar 21, 2020

osdiab commented Mar 21, 2020 •

edited

Loading

marovargovcik commented Mar 23, 2020

nickretallack commented Mar 28, 2020 •

edited

Loading

saileshkotha commented Mar 29, 2020 •

edited

Loading

sandeep-git-hub commented Apr 2, 2020 •

edited

Loading

lswest commented Apr 2, 2020

nickretallack commented Apr 5, 2020 •

edited

Loading

stale bot commented May 6, 2020

shide1989 commented Aug 4, 2020

joshSummerhays commented Aug 6, 2020

AlaaZorkane commented Aug 18, 2020

shide1989 commented Sep 4, 2020

nstrelow commented Sep 9, 2020

fkirc commented Sep 17, 2020 •

edited

Loading

ievgennaida commented Sep 18, 2020 •

edited

Loading

afshin-hoseini commented Sep 19, 2020

cain-wang commented Sep 23, 2020 •

edited

Loading

Badbreaddead commented Sep 24, 2020

jaydlawrence commented Oct 1, 2020

evgar commented Oct 6, 2020

dirkvanvugt commented Oct 20, 2020

saileshkotha commented Oct 24, 2020

react-scripts build ignores ESLint overrides #8683

react-scripts build ignores ESLint overrides #8683

Comments

osdiab commented Mar 21, 2020

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

osdiab commented Mar 21, 2020 • edited Loading

marovargovcik commented Mar 23, 2020

nickretallack commented Mar 28, 2020 • edited Loading

saileshkotha commented Mar 29, 2020 • edited Loading

sandeep-git-hub commented Apr 2, 2020 • edited Loading

lswest commented Apr 2, 2020

nickretallack commented Apr 5, 2020 • edited Loading

stale bot commented May 6, 2020

shide1989 commented Aug 4, 2020

joshSummerhays commented Aug 6, 2020

AlaaZorkane commented Aug 18, 2020

shide1989 commented Sep 4, 2020

nstrelow commented Sep 9, 2020

fkirc commented Sep 17, 2020 • edited Loading

ievgennaida commented Sep 18, 2020 • edited Loading

afshin-hoseini commented Sep 19, 2020

cain-wang commented Sep 23, 2020 • edited Loading

Badbreaddead commented Sep 24, 2020

jaydlawrence commented Oct 1, 2020

evgar commented Oct 6, 2020

dirkvanvugt commented Oct 20, 2020

saileshkotha commented Oct 24, 2020

osdiab commented Mar 21, 2020 •

edited

Loading

nickretallack commented Mar 28, 2020 •

edited

Loading

saileshkotha commented Mar 29, 2020 •

edited

Loading

sandeep-git-hub commented Apr 2, 2020 •

edited

Loading

nickretallack commented Apr 5, 2020 •

edited

Loading

fkirc commented Sep 17, 2020 •

edited

Loading

ievgennaida commented Sep 18, 2020 •

edited

Loading

cain-wang commented Sep 23, 2020 •

edited

Loading