Warnings not always shown

[eluchsinger]

Describe the bug

When running npm start, the output won't show all of the warnings in the project. After editing the files, the warnings start appearing.

(Write your answer here.)

Did you try recovering your dependencies?

NPM Version 6.14.11

Environment

Environment Info:

current version of create-react-app: 5.0.0
running from C:\Users\eluch\AppData\Roaming\npm-cache_npx\3452\node_modules\create-react-app

System:
OS: Windows 10 10.0.19043
CPU: (6) x64 Intel(R) Core(TM) i5-9600K CPU @ 3.70GHz
Binaries:
Node: 14.16.0 - D:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 6.14.11 - D:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Not Found
Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.62)
Internet Explorer: 11.0.19041.1202
npmPackages:
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
react-scripts: 5.0.0 => 5.0.0
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

1. Run npm start
2. See the console output, doesn't show all of the warnings.
3. Edit and save a file where you know there should be a warning (e.g. React Hook useEffect has missing dependencies)

Expected behavior

I would expect the warnings (and errors) of the project to be shown.

Actual behavior

Not all of the warnings are shown in the console output.

Reproducible demo

I will try to add a reproducible demo if this is really not a known bug that everyone can reproduce.

[hydrandt]

I have the same problem after upgrading to react-scripts 5. Issues are shown only for files that have just been saved. So, if there are compilation errors, then you kill the app, and start it again, you end up with "No issues found", get errors in browser console, and get errors in cli again when you save the file that contains the code that doesn't conform to eslint configuration.

It seems as the .eslintrc.js config is not parsed when the app starts. If I have an error in the config (such as wrong name of a config), the error is not shown after start, but only after making first change to a watched file and saving.

[qq831799]

I found this problem might due to the Eslint lintFile and the cache setting(https://eslint.org/docs/developer-guide/nodejs-api#-new-eslintoptions)
When use lintFile and turn the cache on. After the first lint, eslint will use the cache result and only lint the file is changed. And the eslint won't clear the cache automatic.

In react-scripts webpack.config.js

new ESLintPlugin({
    // Plugin options
    extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
    formatter: require.resolve('react-dev-utils/eslintFormatter'),
    eslintPath: require.resolve('eslint'),
    failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
    context: paths.appSrc,
    cache: true,
    cacheLocation: path.resolve(
      paths.appNodeModules,
      '.cache/.eslintcache'
    ),
    // ESLint class options
    cwd: paths.appPath,
    resolvePluginsRelativeTo: __dirname,
    baseConfig: {
      extends: [require.resolve('eslint-config-react-app/base')],
      rules: {
        ...(!hasJsxRuntime && {
          'react/react-in-jsx-scope': 'error',
        }),
      },
    },
  }),

So my workaround solution is before I fix all the eslint waning and error, I will clear the node_modules/.cache manually. But it would take more time at every run.

[JamersonAguiarOSF]

Did anyone find the solution? Same problem here.

[kitsunekyo]

I found this problem might due to the Eslint lintFile and the cache setting(https://eslint.org/docs/developer-guide/nodejs-api#-new-eslintoptions) When use lintFile and turn the cache on. After the first lint, eslint will use the cache result and only lint the file is changed. And the eslint won't clear the cache automatic.

In react-scripts webpack.config.js

new ESLintPlugin({
    // Plugin options
    extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
    formatter: require.resolve('react-dev-utils/eslintFormatter'),
    eslintPath: require.resolve('eslint'),
    failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
    context: paths.appSrc,
    cache: true,
    cacheLocation: path.resolve(
      paths.appNodeModules,
      '.cache/.eslintcache'
    ),
    // ESLint class options
    cwd: paths.appPath,
    resolvePluginsRelativeTo: __dirname,
    baseConfig: {
      extends: [require.resolve('eslint-config-react-app/base')],
      rules: {
        ...(!hasJsxRuntime && {
          'react/react-in-jsx-scope': 'error',
        }),
      },
    },
  }),

So my workaround solution is before I fix all the eslint waning and error, I will clear the node_modules/.cache manually. But it would take more time at every run.

we have an ejected cra5 app (due to multiple massive issues with cra5), and supply a custom .eslintrc on the root. linting works perfecty with yarn lint but not with yarn start

i just crosschecked with yarn lint and our yarn start only shows a handful of all warnings. after i've run yarn lint the yarn start command doesnt show ANY warnings anymore, even though eslint cache is disabled manually in the webpack config. also the node_modules/.cache/.eslintcache folder is empty

the eslint errors are also not shown when running yarn build, even if there are multiple warnings and errors.

[kitsunekyo]

linking #10509

[kitsunekyo]

here's a reproduction repo: https://github.com/kitsunekyo/cra5-eslint-not-emitting

when i run yarn start i sometimes get correct eslint emits, and sometimes absolutely no eslint output. it appears to be completely random.

if its already running, and i hit save on App.tsx once, the eslint error will correctly show up again.

[receter]

I have the same issue, at some point I don’t see warnings. When I save a file the warnings for this file show up.

Deleting the cache (rm -R ./node_modules/.cache) helps, but as soon as I stop the dev server and restart it I have the same issue again. Currently my workaround is to delete .cache before starting the dev server.

Just deleting ./node_modules/.cache/.eslintcache does not fix the issue.

I am currently on Windows with wsl2, I can later check if I have the same error on my macbook.

This also happens with a fresh CRA 5 default project.

[lucapollani]

Are there some news on the issue?
I've encountered the same behavior.

[hydrandt]

Same question here. Is this a dead project / is CRA not recommended way to develop react apps anymore? Or is this not a common scenario to develop?

Last commit to this repo is 29 days ago. 295 open pull requests. Doesn't seem that somebody is actually maintaining this project anymore.

[cristianlivella]

Is there any update here?

It's getting very annoying because I'm often convinced everything is okay, I submit my work to my repository, and I get warnings when I see the continuous deployment build fail.

[hydrandt]

Is this still happening in 5.0.1? Need to check.

[domhaas]

Is this still happening in 5.0.1? Need to check.

Same issue still on 5.0.1 on my side.

[hydrandt]

How is everyone dealing with it? Just not upgrading to 5.x?

[kitsunekyo]

yep. seems like there is barely any updates from the maintainers, so we stick with v4 and evaluate vite as a replacement.

[domhaas]

How is everyone dealing with it? Just not upgrading to 5.x?

"scripts": {
  "start": "rm -R ./node_modules/.cache && ...
  ...

[HurYur]

The fix above helps to represent warnings in the terminal, is there any other fix to help represent warnings in Browser console as well?

[hydrandt]

Did you switch to Vite in the end @kitsunekyo?

[facugaich]

Hi all, this is caused by webpack-contrib/eslint-webpack-plugin#130

[braddi]

It seems that in cra 5 you need to include the eslint configuration in the package.json.

"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}

This solved this issue for me.

[wheresthecode]

AFAICT you can also just delete node_modules/.cache/.eslintcache

[kitsunekyo]

Did you switch to Vite in the end @kitsunekyo?

we did indeed. we abandoned CRA for all projects and moved them to vite.

[ddennis]

Anyone manage to solve this. I have added to package.json - but still not showing up