React-scripts v4 ignores the .eslintignore file at the root when using a monorepo

[ahrbil]

Describe the bug

I have a monorepo that is managed by Lerna and yarn workspaces.
All eslint and prettier configs are hosted in the root of the monorepo, CRA v4 ignores the .eslintignore and .prettierignre
and lints files and folders that are skipped in .eslintignore and .prettierignre.
running eslint via the command line or vs code load the .eslintignore and .prettierignre and respects the ignored files,
back in CRA v3 this was working.

Environment

Environment Info:

current version of create-react-app: 4.0.0
running from C:\Users\user\AppData\Local\Yarn\Data\global\node_modules\create-react-app

System:
OS: Windows 10 10.0.19041
CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
Binaries:
Node: 14.13.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 86.0.4240.111
Edge: Spartan (44.19041.423.0), Chromium (86.0.622.58)
Internet Explorer: 11.0.19041.1
npmPackages:
react: Not Found
react-dom: ^17.0.1 => 17.0.1
react-scripts: Not Found
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

1. Bootstrap a monorepo using lerna.
2. Add eslint and prettier config files alongside with .eslintignore file at the root
3. Bootstrap a CRA app inside the packages folder and remove eslintConfig from package.json
4. Add a js or ts file and ignore it in the .eslintignore file
5. Run yarn dev or build

Expected behavior

If the ignored file contains eslint or prettier error CRA shouldn't report it in the terminal

Actual behavior

CRA lists the files that supposed to be ignored when running dev or build scripts and displays the errors in the terminal

Reproducible demo

https://github.com/ahrbil/cra-v4-monorepo-eslint

1. Install the dependencies using yarn
2. Run yarn start
3. You should see this log :

@cra-v4-monorepo-eslint/web: Starting the development server...
@cra-v4-monorepo-eslint/web: Failed to compile.
@cra-v4-monorepo-eslint/web: src\ignore-this-file.tsx
@cra-v4-monorepo-eslint/web:   Line 7:42:  'children' is missing in props validation  react/prop-types
@cra-v4-monorepo-eslint/web:   Line 7:52:  'color' is missing in props validation     react/prop-types
@cra-v4-monorepo-eslint/web:   Line 8:10:  Delete `·`                                 prettier/prettier
@cra-v4-monorepo-eslint/web: Search for the keywords to learn more about each error. 

even if the ignore-this-file.tsx file is ignored in the .eslintignore file, it is still being checked and makes the build fails to compile

[mareksuscak]

Good catch, if this is true, it explains all the performance issues people have been having since v4 came out.

[ahrbil]

Hello @mareksuscak
I made a repo that you can check:
https://github.com/ahrbil/cra-v4-monorepo-eslint

[0xMachan]

We are having a similar issue. With v4, it seems like the use of eslint-webpack-plugin is not respecting .eslintignore or the ignorePatterns option in package.json. We use yarn workspaces. The symptom we face is that eslint tries to extend configs in the root node_modules folder of the monorepo where it should not. Have any ideas for resolving this?

[ahrbil]

Unfortunately @leifdejong the only workaround I found for this is to copy the root .eslintignore file to the package that is using react-scripts