Create-react-app: Extending TypeScript ESLint config from Create React App does not work

[Ogglas]

Describe the bug, Steps to reproduce, Expected behavior and Actual behavior

I have followed this guide to extend my ESLint config.

https://create-react-app.dev/docs/setting-up-your-editor/#experimental-extending-the-eslint-config

The documentation states that Note that any rules set to "error" will stop the project from building. I have added a .env file with EXTEND_ESLINT=true in the same folder as my package.json file.

https://create-react-app.dev/docs/advanced-configuration/

As soon as this file was added I stopped getting warning from the command npm run build, even when using the default values in package.json:

"eslintConfig": {
  "extends": "react-app"
},

If I set .env file to EXTEND_ESLINT=false the warnings start to show up again.

The reason for doing it in the first place is because I want to add the no-multiple-empty-lines rule like this:

"eslintConfig": {
  "extends": [ "react-app" ],
  "rules": {
    "no-multiple-empty-lines": [
      "error",
      {
        "max": 1,
        "maxEOF": 0,
        "maxBOF": 0
      }
    ]
  }
},

https://eslint.org/docs/rules/no-multiple-empty-lines

I think the config is correct because when I add this rule the following command will show expected result:

npx eslint . --ext .js,.jsx,.ts,.tsx

Before config change:

After config change:

Reading up on the .env file it says that npm run build will read files in the following order: .env.production.local, .env.production, .env.local, .env. Since I only have .env it should pick it up. Documentation also states this above EXTEND_ESLINT - You do not need to declare REACT_APP_ before the below variables as you would with custom environment variables.

https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env

I have read this thread as well but I can't see where I wen't wrong:

https://stackoverflow.com/questions/59633005/how-is-eslint-integrated-into-create-react-app

If I edit the scripts section in package.json to "build": "set EXTEND_ESLINT=true && react-scripts build", I will get the normal warnings but my added rule wont be executed anyway.

If I run npm run start instead of npm run build the compile error will show up as expected:

Probably related is that I tried to add eslint-disable-next-line func-style, prefer-arrow/prefer-arrow-functions to one row. Plugin is added package.json to eslintConfig plugins.

npm run build then failed with the error below but npx eslint . --ext .js,.jsx,.ts,.tsx worked as expected.

Line 7:1: Definition for rule 'prefer-arrow/prefer-arrow-functions' was not found prefer-arrow/prefer-arrow-functions

Did you try recovering your dependencies?

6.14.8

Which terms did you search for in User Guide?

create react app extend eslint

create react app extending the eslint config

Similar error marked as closed in 2019:

https://github.com/facebook/create-react-app/issues/7510

Environment

  current version of create-react-app: 3.4.1
  running from C:\Users\Oscar\AppData\Roaming\npm-cache\_npx\2188\node_modules\create-react-app

  System:
    OS: Windows 10 10.0.19041
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
  Binaries:
    Node: 12.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.19041.423.0
    Internet Explorer: 11.0.19041.1
  npmPackages:
    react: ^16.13.1 => 16.13.1
    react-dom: ^16.13.1 => 16.13.1
    react-scripts: 3.4.1 => 3.4.1
  npmGlobalPackages:
    create-react-app: Not Found

[alex20465]

Same... all this could be avoided by just build the react app, the command is called react-scripts build build isn't linting. It totally does something different than it should.

Build-Compile: For the machines execution / interpretation.

Linting: For human understanding | readability etc.

My issue is, I nicely check the code and automatically fix the linting issues, do some contract testing with the backend, build the react app and react-scripts says: Line 17:60: 'variantId' is defined but never used @typescript-eslint/no-unused-vars.. while
variantId is a interface property and not a variable. Now find out what is going on, just googled how to react-scripts build without non-sense linting.... no option there.

Now I will set the CI=false under the CI to ignore the undesired behavior of the react-build process.