From e8b13ccaac9a6c4d08ee5a559ecd8761fceb06e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Morten=20N=2EO=2E=20N=C3=B8rgaard=20Henriksen?= <Mh@gi2.dk>
Date: Sat, 31 Jul 2021 13:32:46 +0200
Subject: [PATCH 1/2] fix(overlay): render ansi formattet error messages
 correctly

---
 client-src/overlay.js                         |   7 +-
 package-lock.json                             |  11 +
 package.json                                  |   1 +
 .../overlay.test.js.snap.webpack5             | 199 ++++++++++++++----
 test/e2e/overlay.test.js                      |  53 +++++
 5 files changed, 222 insertions(+), 49 deletions(-)

diff --git a/client-src/overlay.js b/client-src/overlay.js
index 11fcc4a9a8..7dad85104b 100644
--- a/client-src/overlay.js
+++ b/client-src/overlay.js
@@ -2,6 +2,7 @@
 // They, in turn, got inspired by webpack-hot-middleware (https://github.com/glenjamin/webpack-hot-middleware).
 
 const ansiHTML = require("ansi-html");
+const { encode } = require("html-entities");
 
 const colors = {
   reset: ["transparent", "transparent"],
@@ -135,8 +136,9 @@ function show(messages, type) {
 
       // Make it look similar to our terminal.
       const errorMessage = message.message || messages[0];
-      const text = ansiHTML(errorMessage);
-      const messageTextNode = document.createTextNode(text);
+      const text = ansiHTML(encode(errorMessage));
+      const messageTextNode = document.createElement("div");
+      messageTextNode.innerHTML = text;
 
       entryElement.appendChild(typeElement);
       entryElement.appendChild(document.createElement("br"));
@@ -144,7 +146,6 @@ function show(messages, type) {
       entryElement.appendChild(messageTextNode);
       entryElement.appendChild(document.createElement("br"));
       entryElement.appendChild(document.createElement("br"));
-      entryElement.appendChild(document.createElement("br"));
 
       containerElement.appendChild(entryElement);
     });
diff --git a/package-lock.json b/package-lock.json
index be6155a386..ed64015acd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "del": "^6.0.0",
         "express": "^4.17.1",
         "graceful-fs": "^4.2.6",
+        "html-entities": "^2.3.2",
         "http-proxy-middleware": "^2.0.0",
         "internal-ip": "^6.2.0",
         "ipaddr.js": "^2.0.1",
@@ -8491,6 +8492,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/html-entities": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
+      "integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ=="
+    },
     "node_modules/html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -24206,6 +24212,11 @@
         "whatwg-encoding": "^1.0.5"
       }
     },
+    "html-entities": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
+      "integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ=="
+    },
     "html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
diff --git a/package.json b/package.json
index 4108f3de0e..f6afd66242 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "del": "^6.0.0",
     "express": "^4.17.1",
     "graceful-fs": "^4.2.6",
+    "html-entities": "^2.3.2",
     "http-proxy-middleware": "^2.0.0",
     "internal-ip": "^6.2.0",
     "ipaddr.js": "^2.0.1",
diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack5 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
index 751f71ca66..6aac366d4c 100644
--- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
+++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
@@ -35,10 +35,14 @@ exports[`overlay should not show initially, then show on an error and allow to c
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Module
-      parse failed: Unterminated template (1:1) You may need an appropriate
-      loader to handle this file type, currently no loaders are configured to
-      process this file. See https://webpack.js.org/concepts#loaders &gt; \`;<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>
+        Module parse failed: Unterminated template (1:1) You may need an
+        appropriate loader to handle this file type, currently no loaders are
+        configured to process this file. See
+        https://webpack.js.org/concepts#loaders &gt; \`;
+      </div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -113,10 +117,14 @@ exports[`overlay should not show initially, then show on an error, then hide on
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Module
-      parse failed: Unterminated template (1:1) You may need an appropriate
-      loader to handle this file type, currently no loaders are configured to
-      process this file. See https://webpack.js.org/concepts#loaders &gt; \`;<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>
+        Module parse failed: Unterminated template (1:1) You may need an
+        appropriate loader to handle this file type, currently no loaders are
+        configured to process this file. See
+        https://webpack.js.org/concepts#loaders &gt; \`;
+      </div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -191,10 +199,14 @@ exports[`overlay should not show initially, then show on an error, then show oth
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Module
-      parse failed: Unterminated template (1:1) You may need an appropriate
-      loader to handle this file type, currently no loaders are configured to
-      process this file. See https://webpack.js.org/concepts#loaders &gt; \`;<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>
+        Module parse failed: Unterminated template (1:1) You may need an
+        appropriate loader to handle this file type, currently no loaders are
+        configured to process this file. See
+        https://webpack.js.org/concepts#loaders &gt; \`;
+      </div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -236,10 +248,14 @@ exports[`overlay should not show initially, then show on an error, then show oth
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Module
-      parse failed: Unterminated template (1:1) You may need an appropriate
-      loader to handle this file type, currently no loaders are configured to
-      process this file. See https://webpack.js.org/concepts#loaders &gt; \`;a<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>
+        Module parse failed: Unterminated template (1:1) You may need an
+        appropriate loader to handle this file type, currently no loaders are
+        configured to process this file. See
+        https://webpack.js.org/concepts#loaders &gt; \`;a
+      </div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -361,12 +377,14 @@ exports[`overlay should show on a warning and error for initial compilation and
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span
-      ><br /><br />&lt;strong&gt;strong&lt;/strong&gt;<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <div>&lt;strong&gt;strong&lt;/strong&gt;</div>
+      <br /><br />
     </div>
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span
-      ><br /><br />&lt;strong&gt;strong&lt;/strong&gt;<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>&lt;strong&gt;strong&lt;/strong&gt;</div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -427,24 +445,29 @@ exports[`overlay should show on a warning and error for initial compilation: ove
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
-      from compilation<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <div>Warning from compilation</div>
+      <br /><br />
     </div>
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
-      from compilation<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <div>Warning from compilation</div>
+      <br /><br />
     </div>
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
-      compilation. Can't find 'test' module.<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>Error from compilation. Can't find 'test' module.</div>
+      <br /><br />
     </div>
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
-      compilation. Can't find 'test' module.<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>Error from compilation. Can't find 'test' module.</div>
+      <br /><br />
     </div>
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
-      compilation. Can't find 'test' module.<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>Error from compilation. Can't find 'test' module.</div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -505,8 +528,9 @@ exports[`overlay should show on a warning for initial compilation: overlay html
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
-      from compilation<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <div>Warning from compilation</div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -567,8 +591,9 @@ exports[`overlay should show on a warning when "client.overlay" is "true": overl
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
-      from compilation<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <div>Warning from compilation</div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -629,8 +654,9 @@ exports[`overlay should show on a warning when "client.overlay.errors" is "true"
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
-      from compilation<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <div>Warning from compilation</div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -691,8 +717,9 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
-      from compilation<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <div>Warning from compilation</div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -718,6 +745,82 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru
 "
 `;
 
+exports[`overlay should show on an ansi formatted error for initial compilation: 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>
+        <span
+          style=\\"
+            font-weight: normal;
+            opacity: 1;
+            color: #transparent;
+            background: #transparent;
+          \\"
+        >
+          <span style=\\"color: #6d7891\\"> 18 |</span>
+          <span style=\\"color: #ffd080\\">Render</span>
+          <span style=\\"color: #ffd080\\">ansi formatted text</span></span
+        >
+      </div>
+      <br /><br />
+    </div>
+  </div>
+</body>
+"
+`;
+
+exports[`overlay should show on an ansi formatted error for initial compilation: 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 on an error for initial compilation: overlay html 1`] = `
 "<body>
   <div
@@ -753,8 +856,9 @@ exports[`overlay should show on an error for initial compilation: overlay html 1
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
-      compilation. Can't find 'test' module.<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>Error from compilation. Can't find 'test' module.</div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -815,8 +919,9 @@ exports[`overlay should show on an error when "client.overlay" is "true": overla
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
-      compilation. Can't find 'test' module.<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>Error from compilation. Can't find 'test' module.</div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -877,8 +982,9 @@ exports[`overlay should show on an error when "client.overlay.errors" is "true":
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
-      compilation. Can't find 'test' module.<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>Error from compilation. Can't find 'test' module.</div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -939,8 +1045,9 @@ exports[`overlay should show on an error when "client.overlay.warnings" is "true
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
-      from compilation<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <div>Warning from compilation</div>
+      <br /><br />
     </div>
   </div>
 </body>
diff --git a/test/e2e/overlay.test.js b/test/e2e/overlay.test.js
index ca39ed3042..6cfdda9bf2 100644
--- a/test/e2e/overlay.test.js
+++ b/test/e2e/overlay.test.js
@@ -200,6 +200,59 @@ describe("overlay", () => {
     });
   });
 
+  it("should show on an ansi formatted error for initial compilation", async () => {
+    const compiler = webpack(config);
+
+    new ErrorPlugin("[0m [90m 18 |[39m           [33mRender[39m [33mansi formatted text[39m[0m").apply(
+      compiler
+    );
+
+    const devServerOptions = {
+      host: "0.0.0.0",
+      port,
+    };
+    const server = new Server(devServerOptions, compiler);
+
+    await new Promise((resolve, reject) => {
+      server.listen(devServerOptions.port, devServerOptions.host, (error) => {
+        if (error) {
+          reject(error);
+
+          return;
+        }
+
+        resolve();
+      });
+    });
+
+    const { page, browser } = await runBrowser();
+
+    await page.goto(`http://localhost:${port}/main`, {
+      waitUntil: "networkidle0",
+    });
+
+    const pageHtml = await page.evaluate(() => document.body.outerHTML);
+    const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
+    const overlayFrame = await overlayHandle.contentFrame();
+    const overlayHtml = await overlayFrame.evaluate(
+      () => document.body.outerHTML
+    );
+
+    expect(prettier.format(pageHtml, { parser: "html" })).toMatchSnapshot(
+      "page html"
+    );
+    expect(prettier.format(overlayHtml, { parser: "html" })).toMatchSnapshot(
+      "overlay html"
+    );
+
+    await browser.close();
+    await new Promise((resolve) => {
+      server.close(() => {
+        resolve();
+      });
+    });
+  });
+
   it("should show on a warning and error for initial compilation and protects against xss", async () => {
     const compiler = webpack(config);
 

From 5cb4923e4bfdf97d220ec02c5f429df94429bfef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Morten=20N=2EO=2E=20N=C3=B8rgaard=20Henriksen?= <Mh@gi2.dk>
Date: Sat, 31 Jul 2021 19:23:37 +0200
Subject: [PATCH 2/2] fix(test): overlay.test update webpack 4 snapshot

---
 .../overlay.test.js.snap.webpack4             | 203 +++++++++++++-----
 1 file changed, 153 insertions(+), 50 deletions(-)

diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
index 931386b5a1..804589bc46 100644
--- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
+++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
@@ -35,11 +35,14 @@ exports[`overlay should not show initially, then show on an error and allow to c
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />./foo.js
-      1:1 Module parse failed: Unterminated template (1:1) You may need an
-      appropriate loader to handle this file type, currently no loaders are
-      configured to process this file. See
-      https://webpack.js.org/concepts#loaders &gt; \`;<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>
+        ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
+        need an appropriate loader to handle this file type, currently no
+        loaders are configured to process this file. See
+        https://webpack.js.org/concepts#loaders &gt; \`;
+      </div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -114,11 +117,14 @@ exports[`overlay should not show initially, then show on an error, then hide on
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />./foo.js
-      1:1 Module parse failed: Unterminated template (1:1) You may need an
-      appropriate loader to handle this file type, currently no loaders are
-      configured to process this file. See
-      https://webpack.js.org/concepts#loaders &gt; \`;<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>
+        ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
+        need an appropriate loader to handle this file type, currently no
+        loaders are configured to process this file. See
+        https://webpack.js.org/concepts#loaders &gt; \`;
+      </div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -193,11 +199,14 @@ exports[`overlay should not show initially, then show on an error, then show oth
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />./foo.js
-      1:1 Module parse failed: Unterminated template (1:1) You may need an
-      appropriate loader to handle this file type, currently no loaders are
-      configured to process this file. See
-      https://webpack.js.org/concepts#loaders &gt; \`;<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>
+        ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
+        need an appropriate loader to handle this file type, currently no
+        loaders are configured to process this file. See
+        https://webpack.js.org/concepts#loaders &gt; \`;
+      </div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -239,11 +248,14 @@ exports[`overlay should not show initially, then show on an error, then show oth
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />./foo.js
-      1:1 Module parse failed: Unterminated template (1:1) You may need an
-      appropriate loader to handle this file type, currently no loaders are
-      configured to process this file. See
-      https://webpack.js.org/concepts#loaders &gt; \`;a<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>
+        ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
+        need an appropriate loader to handle this file type, currently no
+        loaders are configured to process this file. See
+        https://webpack.js.org/concepts#loaders &gt; \`;a
+      </div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -365,12 +377,14 @@ exports[`overlay should show on a warning and error for initial compilation and
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span
-      ><br /><br />&lt;strong&gt;strong&lt;/strong&gt;<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <div>&lt;strong&gt;strong&lt;/strong&gt;</div>
+      <br /><br />
     </div>
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span
-      ><br /><br />&lt;strong&gt;strong&lt;/strong&gt;<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>&lt;strong&gt;strong&lt;/strong&gt;</div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -431,24 +445,29 @@ exports[`overlay should show on a warning and error for initial compilation: ove
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
-      from compilation<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <div>Warning from compilation</div>
+      <br /><br />
     </div>
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
-      from compilation<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <div>Warning from compilation</div>
+      <br /><br />
     </div>
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
-      compilation. Can't find 'test' module.<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>Error from compilation. Can't find 'test' module.</div>
+      <br /><br />
     </div>
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
-      compilation. Can't find 'test' module.<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>Error from compilation. Can't find 'test' module.</div>
+      <br /><br />
     </div>
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
-      compilation. Can't find 'test' module.<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>Error from compilation. Can't find 'test' module.</div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -509,8 +528,9 @@ exports[`overlay should show on a warning for initial compilation: overlay html
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
-      from compilation<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <div>Warning from compilation</div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -571,8 +591,9 @@ exports[`overlay should show on a warning when "client.overlay" is "true": overl
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
-      from compilation<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <div>Warning from compilation</div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -633,8 +654,9 @@ exports[`overlay should show on a warning when "client.overlay.errors" is "true"
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
-      from compilation<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <div>Warning from compilation</div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -695,8 +717,9 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
-      from compilation<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <div>Warning from compilation</div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -722,6 +745,82 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru
 "
 `;
 
+exports[`overlay should show on an ansi formatted error for initial compilation: 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>
+        <span
+          style=\\"
+            font-weight: normal;
+            opacity: 1;
+            color: #transparent;
+            background: #transparent;
+          \\"
+        >
+          <span style=\\"color: #6d7891\\"> 18 |</span>
+          <span style=\\"color: #ffd080\\">Render</span>
+          <span style=\\"color: #ffd080\\">ansi formatted text</span></span
+        >
+      </div>
+      <br /><br />
+    </div>
+  </div>
+</body>
+"
+`;
+
+exports[`overlay should show on an ansi formatted error for initial compilation: 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 on an error for initial compilation: overlay html 1`] = `
 "<body>
   <div
@@ -757,8 +856,9 @@ exports[`overlay should show on an error for initial compilation: overlay html 1
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
-      compilation. Can't find 'test' module.<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>Error from compilation. Can't find 'test' module.</div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -819,8 +919,9 @@ exports[`overlay should show on an error when "client.overlay" is "true": overla
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
-      compilation. Can't find 'test' module.<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>Error from compilation. Can't find 'test' module.</div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -881,8 +982,9 @@ exports[`overlay should show on an error when "client.overlay.errors" is "true":
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
-      compilation. Can't find 'test' module.<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <div>Error from compilation. Can't find 'test' module.</div>
+      <br /><br />
     </div>
   </div>
 </body>
@@ -943,8 +1045,9 @@ exports[`overlay should show on an error when "client.overlay.warnings" is "true
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
-      from compilation<br /><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <div>Warning from compilation</div>
+      <br /><br />
     </div>
   </div>
 </body>
