From 9313454066c2a830b425965837a2756d8f945e97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Morten=20N=2EO=2E=20N=C3=B8rgaard=20Henriksen?=
Date: Mon, 9 Aug 2021 18:24:04 +0200
Subject: [PATCH] fix: render ansi formatted error messages correctly in
overlay (#3579)
---
client-src/overlay.js | 7 +-
package-lock.json | 11 +
package.json | 1 +
.../overlay.test.js.snap.webpack4 | 203 +++++++++++++-----
.../overlay.test.js.snap.webpack5 | 199 +++++++++++++----
test/e2e/overlay.test.js | 53 +++++
6 files changed, 375 insertions(+), 99 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 aa8f879973..d16958541c 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",
@@ -8493,6 +8494,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",
@@ -24191,6 +24197,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 1bdaf7258f..200fe19985 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,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.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
-
Error: ./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 > \`;
+
Error:
+
+ ./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 > \`;
+
+
+
+
Compiled with problems:
+ X
+
+
Error:
+
+
+ 18 |
+ Render
+ ansi formatted text
+
+
+
+
+
+
+
+
-
Error: Error from
- compilation. Can't find 'test' module.
+
Error:
+
Error from compilation. Can't find 'test' module.
+
+
+
Compiled with problems:
+ X
+
+
Error:
+
+
+ 18 |
+ Render
+ ansi formatted text
+
+
+
+
+
+
+
+
-
Error: Error from
- compilation. Can't find 'test' module.
+
Error:
+
Error from compilation. Can't find 'test' module.
+