fix: infinity refresh on warnings (#4006)

webpack · Nov 4, 2021 · 10da223 · 10da223
1 parent 171dba9
commit 10da223
Show file tree

Hide file tree

Showing 7 changed files with 469 additions and 5 deletions.
diff --git a/client-src/index.js b/client-src/index.js
@@ -183,8 +183,6 @@ const onSocketMessage = {
     if (needShowOverlayForWarnings) {
       show("warning", warnings);
     }
-
-    reloadApp(options, status);
   },
   errors(errors) {
     log.error("Errors while compiling. Reload prevented.");

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -74,6 +74,8 @@
     "body-parser": "^1.19.0",
     "core-js": "^3.12.1",
     "css-loader": "^5.2.4",
+    "css-tree": "^1.1.3",
+    "csstree": "^0.0.3",
     "eslint": "^8.0.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-webpack": "^1.2.5",

diff --git a/test/client/index.test.js b/test/client/index.test.js
@@ -206,7 +206,6 @@ describe("index", () => {
     onSocketMessage.warnings([]);
 
     expect(overlay.show).toBeCalled();
-    expect(reloadApp).toBeCalled();
   });
 
   test("should run onSocketMessage.error", () => {

diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
@@ -342,6 +342,69 @@ exports[`overlay should not show initially, then show on an error, then show oth
 "
 `;
 
+exports[`overlay should show a warning after invalidation: overlay html 1`] = `
+"<body>
+  <div
+    id=\\"webpack-dev-server-client-overlay-div\\"
+    style=\\"
+      position: fixed;
+      box-sizing: border-box;
+      inset: 0px;
+      width: 100vw;
+      height: 100vh;
+      background-color: rgba(0, 0, 0, 0.85);
+      color: rgb(232, 232, 232);
+      font-family: Menlo, Consolas, monospace;
+      font-size: large;
+      padding: 2rem;
+      line-height: 1.2;
+      white-space: pre-wrap;
+      overflow: auto;
+    \\"
+  >
+    <span>Compiled with problems:</span
+    ><button
+      style=\\"
+        background: transparent;
+        border: none;
+        font-size: 20px;
+        font-weight: bold;
+        color: white;
+        cursor: pointer;
+        float: right;
+      \\"
+    >
+      X</button
+    ><br /><br />
+    <div>
+      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
+      <div>Warning from compilation</div>
+      <br /><br />
+    </div>
+  </div>
+</body>
+"
+`;
+
+exports[`overlay should show a warning after invalidation: page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+  <iframe
+    id=\\"webpack-dev-server-client-overlay\\"
+    src=\\"about:blank\\"
+    style=\\"
+      position: fixed;
+      inset: 0px;
+      width: 100vw;
+      height: 100vh;
+      border: none;
+      z-index: 2147483647;
+    \\"
+  ></iframe>
+</body>
+"
+`;
+
 exports[`overlay should show a warning and error for initial compilation and protects against xss: overlay html 1`] = `
 "<body>
   <div
@@ -891,6 +954,69 @@ exports[`overlay should show an ansi formatted error for initial compilation: pa
 "
 `;
 
+exports[`overlay should show an error after invalidation: overlay html 1`] = `
+"<body>
+  <div
+    id=\\"webpack-dev-server-client-overlay-div\\"
+    style=\\"
+      position: fixed;
+      box-sizing: border-box;
+      inset: 0px;
+      width: 100vw;
+      height: 100vh;
+      background-color: rgba(0, 0, 0, 0.85);
+      color: rgb(232, 232, 232);
+      font-family: Menlo, Consolas, monospace;
+      font-size: large;
+      padding: 2rem;
+      line-height: 1.2;
+      white-space: pre-wrap;
+      overflow: auto;
+    \\"
+  >
+    <span>Compiled with problems:</span
+    ><button
+      style=\\"
+        background: transparent;
+        border: none;
+        font-size: 20px;
+        font-weight: bold;
+        color: white;
+        cursor: pointer;
+        float: right;
+      \\"
+    >
+      X</button
+    ><br /><br />
+    <div>
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
+      <div>Error from compilation</div>
+      <br /><br />
+    </div>
+  </div>
+</body>
+"
+`;
+
+exports[`overlay should show an error after invalidation: page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+  <iframe
+    id=\\"webpack-dev-server-client-overlay\\"
+    src=\\"about:blank\\"
+    style=\\"
+      position: fixed;
+      inset: 0px;
+      width: 100vw;
+      height: 100vh;
+      border: none;
+      z-index: 2147483647;
+    \\"
+  ></iframe>
+</body>
+"
+`;
+
 exports[`overlay should show an error for initial compilation: overlay html 1`] = `
 "<body>
   <div