Skip to content

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

Closed
@jawadsh123

Description

@jawadsh123

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions