diff --git a/packages/react-dev-utils/ansiHTML.js b/packages/react-dev-utils/ansiHTML.js
index 9f53cea67a3..90bf70374ee 100644
--- a/packages/react-dev-utils/ansiHTML.js
+++ b/packages/react-dev-utils/ansiHTML.js
@@ -10,6 +10,8 @@
'use strict';
var Anser = require('anser');
+var Entities = require('html-entities').AllHtmlEntities;
+var entities = new Entities();
// Color scheme inspired by https://chriskempson.github.io/base16/css/base16-github.css
// var base00 = 'ffffff'; // Default Background
@@ -61,7 +63,7 @@ var anserMap = {
};
function ansiHTML(txt) {
- var arr = new Anser().ansiToJson(txt, {
+ var arr = new Anser().ansiToJson(entities.encode(txt), {
use_classes: true,
});
diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index 78002b28efb..f2f206a5cd2 100644
--- a/packages/react-dev-utils/webpackHotDevClient.js
+++ b/packages/react-dev-utils/webpackHotDevClient.js
@@ -22,9 +22,7 @@ var SockJS = require('sockjs-client');
var stripAnsi = require('strip-ansi');
var url = require('url');
var formatWebpackMessages = require('./formatWebpackMessages');
-var Entities = require('html-entities').AllHtmlEntities;
var ansiHTML = require('./ansiHTML');
-var entities = new Entities();
function createOverlayIframe(onIframeLoad) {
var iframe = document.createElement('iframe');
@@ -138,7 +136,7 @@ function showErrorOverlay(message) {
'margin-bottom: 0.5em; overflow-x: auto; white-space: pre-wrap; ' +
'border-radius: 0.25rem; background-color: rgba(206, 17, 38, 0.05)">' +
'' +
- ansiHTML(entities.encode(message)) +
+ ansiHTML(message) +
'
' +
'