Create-react-app: How to hide unwanted warning

[EasonWang01]

1. How to hide the yellow block warning from webpack?

2. I'm not using PropTypes in my app so I guess the first red warning is from npm package,but how to know which package using this?I thought it's not a clear warning.

[gaearon]

I'm not using PropTypes in my app so I guess the first red warning is from npm package,but how to know which package using this?I thought it's not a clear warning.

If you click on it you will see the callsite stack. Clicking on each item will show the source for each stack frame, so you can see where it is coming from.

How to hide the yellow block warning from webpack?

Why do you want to hide those warnings?
It shouldn't be hard to fix those warnings, and alt tags are necessary for accessibility.

For example, you could fix <img src="pic.jpg" /> to be <img src="pic.jpg" alt="User profile" />, and these warnings will go away. You can google the name of each warning (jsx-a11y/img-has-alt or no-useless-concat) to learn more about them and why fixing them is a good idea.

If you insist on ignoring them, the terminal prints a hint on how to do it.

I hope this helps!

[EasonWang01]

If all from bundle.js how to know which function calling it.

[Timer]

Interesting, chrome should be picking up on your sourcemap and give you the real locations.
Can you try clicking on one of the "bundle.js" links and seeing if chrome recommends loading + turning on sourcemaps?

[EasonWang01]

ok,after turn on

It shows up the call stack

but the propType was used in third party npm package,so still can't fix it before pull request.

[gaearon]

I’m not sure what exactly you are asking. If you click on those links, one of them will be a component (probably a third party one). File an issue with the repository of this component, and somebody will fix it and release an update that doesn’t rely on React.PropTypes.

This warning is also not urgent, and you can ignore it. It’s only here to prepare you for React 16 release.

[tnrich]

Hey @gaearon , while I like having the eslint warnings while linting, I don't really like them littering the chrome console. The reason being is that I often want to console log stuff to the chrome console and it always seems like I have about 10 of those warnings in the way (even if I do clean them up after).

Is there a way to make it so they just don't get output to the chrome console? Seems like this should be an easy option to tweak. Thanks!

[gaearon]

We cap warnings in the console by five files maximum.

Can you explain more about your use case of developing with many warnings? What kind of warnings are you seeing? Why are you ignoring them in development?

[tnrich]

Hey @gaearon,
Thanks for replying so quickly :)

Okay, an example that happens all the time is that I'm editing a file and making changes, maybe commenting out a part of the code I think might be at the root of some issue. This might cause several "unused variable" warnings. I don't immediately want to fix those warnings because I'll likely comment back in the code in a second once I've determined what the issue is. Everything is fine so far, but once I want to simultaneously console log some variable, the chrome warnings become very annoying.

I am sure other people are experiencing this because it is a common complaint of my coworkers as well.

The errors still show up in the terminal (which I like better because it doesn't get in the way of my console logs and I can actually click on the line in question and hop over to my editor and fix it) and I can still enforce that linting passes before allowing commits/PRs to be merged.

It doesn't seem too tough to allow for people to optionally turn these off. Can we do it?

Thanks!

[gaearon]

Can you show me a screenshot of this in practice?

It doesn't seem too tough to allow for people to optionally turn these off. Can we do it?

No. We don't do this because instead of fixing the problem it just introduces an obscure configuration flag that most people don't know about. We can either fix it for everybody, or not fix it at all.

I want to better understand what the problematic case looks like (a screenshot) so that I have a better idea of how to fix it for everybody.

[tnrich]

Here are some screenshots:

Clearly there are other unused var issues that arise from us not always fixing these eslint warnings right away (usually because we are commenting out something that is in development).

While it definitely could be argued that we should just fix those issues before pushing any shared code, often it doesn't make sense to do so if it is a feature that will be added back in eventually.

Does that help you understand more where these linting warnings are coming from?

[tnrich]

We can either fix it for everybody, or not fix it at all.

I'm not sure I agree with that statement. This doesn't seem like something that can be "fixed" for everybody. It seems like it is a feature that some people might want and others might not want. In my case, I like the terminal lint warnings, but I don't like the chrome lint warnings. For another person they might like both, or vice-versa.

Having an option to suppress the chrome lint warnings would make me happy :)

Thanks!

[tnrich]

Hey @gaearon I just upgraded to the most recent version and see that these warnings are now limited to 5 like you said:

So that should solve my issue. Thanks!

[gaearon]

That’s why I said it‘s better to fix for everyone 😉 There were two different issues: noisy bad output (which we fixed) and lack of limits (which we also fixed).

[gaearon]

Also, the "definition for rule was not found" warnings are related to something being wrong in your node_modules. Please remove the node_modules folder and run npm install again. If you have specific versions of plugins in your package.json please remove them because it is not supported.

[gaearon]

Once you fix that you might see more noisy warnings (since each file has more than one warning). I'm happy to discuss this in a separate issue. For example we could only show warnings in the Chrome console for most recently edited file. I'm not sure if it's possible but happy to have someone look into it, if you're interested!

[gaearon]

I filed https://github.com/facebookincubator/create-react-app/issues/2378 as next step to improve this.

[dwelch2344]

Having an option to suppress the chrome lint warnings would make me happy :)

Second this. There's times where I'm dropping gear and working across a number of files, and all I want to see in the chrome output is _my_ console output. Having a limiter here would uber convenient (and a few engineers from various teams I've worked with agree)

[gaearon]

@dwelch2344 Could you clarify, what sort of warnings are you seeing there?

[Inlesco]

@gaearon Is there still no way to disable all the console.warn (with yellow background) output in the Chrome dev console for ESLint errors/warnings?

Example:

webpackHotDevClient.js:136 ./src/components/Cars/AddNewCarModal.js
  Line 73:  Expected a default case  default-case

Disabling this would be very useful

[dancherb]

Same problem here. By default when I'm working on components, I have a bunch of core imports at the top that I may or may not use while developing, and then clean up later.

I don't want to remove these essential imports just because I haven't used them yet at this stage of developing a component/screen. However, my console is then getting spammed with:

/src/actions/grabSave.js
  Line 4:  'visit' is defined but never used  no-unused-vars
  Line 4:  'on' is defined but never used     no-unused-vars
  Line 4:  'off' is defined but never used    no-unused-vars
  Line 4:  'clear' is defined but never used  no-unused-vars
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:155
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:208
./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:51
(anonymous) @ main.js:274
./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:272
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50
WebSocketTransport.ws.onmessage @ websocket.js:35
webpackHotDevClient.js:138 ./src/atoms/Icon.js
  Line 5:  'View' is defined but never used   no-unused-vars
  Line 7:  'style' is defined but never used  no-unused-vars
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:155
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:208
./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:51
(anonymous) @ main.js:274
./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:272
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50
WebSocketTransport.ws.onmessage @ websocket.js:35
webpackHotDevClient.js:138 ./src/screens/HelloScreen.js
  Line 6:  'T' is defined but never used  no-unused-vars
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:155
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:208
./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:51
(anonymous) @ main.js:274
./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:272
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50
WebSocketTransport.ws.onmessage @ websocket.js:35
webpackHotDevClient.js:138 ./src/atoms/SaveButton.js
  Line 7:  'style' is defined but never used  no-unused-vars

[brunomiyamottol]

If you dont want to see those warnings add the "mode" flag on the command here is how I do it :
webpack-dev-server --mode=development
if you want more details on the mode flag go ask the boss https://webpack.js.org/concepts/mode/

hope this helps 👍 @brunomiyamotto

[pranavq212]

You can disable warnings coming as error in following way:

For webpack 4 and later :
webpack --mode=production
--mode=production build in production mode in webpack 4 or later

For older webpack :
webpack --config webpack.config.js -p
-p flag is used in older webpack for production build

[dancherb]

@pranavq212 @brunomiyamottol any ideas if I'm using create-react-app?

bash: webpack: command not found

[pranavq212]

@dancherb make sure webpack is installed by npm.
Try
npm install webpack or npm install -g webpack

[dancherb]

@pranavq212 had a go and it seems like there's extra steps required besides what CRA gives you out of the box:

One CLI for webpack must be installed.. (fair enough, but then..)

ERROR in ./src/index.js 43:4
Module parse failed: Unexpected token (43:4)
You may need an appropriate loader to handle this file type.
| // ROUTER
| ReactDOM.render(...

[pranavjandial123]

Just add this to ur index.js
console.disableYellowBox = true

[chrisdel101]

@brunomiyamottol What do I add in create react app? Just adding webpack-dev-server --mode=development as is doesn't run at all.
react-scripts start --mode=development, a random attempt I tried, does not silence.