Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

webpack error overlay is shown even on warnings (on 5.0.0-next.31) #11352

Closed
jawadsh123 opened this issue Sep 1, 2021 · 0 comments · Fixed by #11413
Closed

webpack error overlay is shown even on warnings (on 5.0.0-next.31) #11352

jawadsh123 opened this issue Sep 1, 2021 · 0 comments · Fixed by #11413

Comments

@jawadsh123
Copy link
Contributor

jawadsh123 commented Sep 1, 2021

Describe the bug

Before webpack5, react-error-overlay used to show up only on errors and not on warnings
But the newer webpack backed error overlay shows up on both errors and warnings

Steps to reproduce

  1. setup a CRA app with next version of react-scripts
  2. do a change that triggers a compile warning
  3. notice the overlay

Expected behavior

Dunno if this was an intentional change,
previously overlay was not shown on warnings (screenshot for 4.0.3)
Screenshot_20210901_163948

Actual behavior

Now overlay is shown on warnings
(screenshot for 5.0.0-next.31)
Screenshot_20210901_145748

Reproducible demo

I've setup a minimal repro here -> https://github.com/jawadsh123/cra-overlay-bug
It's simply a fresh CRA app with a simulated warning

Possible solution

I've been able to get the earlier behavior by changing this part of webpack config -> https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpackDevServer.config.js#L84

diff --git a/node_modules/react-scripts/config/webpackDevServer.config.js b/node_modules/react-scripts/config/webpackDevServer.config.js
index 1be01b1..8e71550 100644
--- a/node_modules/react-scripts/config/webpackDevServer.config.js
+++ b/node_modules/react-scripts/config/webpackDevServer.config.js
@@ -81,7 +81,10 @@ module.exports = function (proxy, allowedHost) {
         pathname: sockPath,
         port: sockPort,
       },
-      overlay: true,
+      overlay: {
+        errors: true,
+        warnings: false,
+      },
     },
     devMiddleware: {
       // It is important to tell WebpackDevServer to use the same "publicPath" path as
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant