From c751555e0e7e78fc18628a3c06e305a6760e63bd Mon Sep 17 00:00:00 2001
From: "Fred K. Schott" <fkschott@gmail.com>
Date: Fri, 16 Oct 2020 14:27:05 -0700
Subject: [PATCH] fix hmr error overlay (#1331)

---
 snowpack/assets/hmr-error-overlay.js    | 9 +++------
 test-dev/__snapshots__/dev.test.ts.snap | 2 +-
 2 files changed, 4 insertions(+), 7 deletions(-)
diff --git a/snowpack/assets/hmr-error-overlay.js b/snowpack/assets/hmr-error-overlay.js
index 5d6e111fb0..5a2a0cbd43 100644
--- a/snowpack/assets/hmr-error-overlay.js
+++ b/snowpack/assets/hmr-error-overlay.js
@@ -33,7 +33,6 @@ output itself here.
 */
 
 const ERROR_OVERLAY_TEMPLATE = `
-<template id="snowpack-error-overlay">
     <style>
           :host {
             all: initial;
@@ -886,11 +885,10 @@ const ERROR_OVERLAY_TEMPLATE = `
     </p>
     <hr><pre>Loading...</pre></div>
     </div></div></div></div>
-</template>`;
+`;
 
-var wrapper = document.createElement('div');
-wrapper.innerHTML = ERROR_OVERLAY_TEMPLATE;
-document.body.appendChild(wrapper);
+const template = document.createElement('template');
+template.innerHTML = ERROR_OVERLAY_TEMPLATE;
 
 customElements.define('hmr-error-overlay', class HmrErrorOverlay extends HTMLElement {
   constructor({ title, errorMessage, fileLoc, errorStackTrace }) {
@@ -900,7 +898,6 @@ customElements.define('hmr-error-overlay', class HmrErrorOverlay extends HTMLEle
     this.fileLoc = fileLoc;
     this.errorStackTrace = errorStackTrace;
     this.sr = this.attachShadow({ mode: 'open' });
-    const template = document.getElementById('snowpack-error-overlay');
     this.sr.appendChild(template.content.cloneNode(true));
     this.close = this.close.bind(this);
   }
diff --git a/test-dev/__snapshots__/dev.test.ts.snap b/test-dev/__snapshots__/dev.test.ts.snap
index 86fbc788b4..26374ce1da 100644
--- a/test-dev/__snapshots__/dev.test.ts.snap
+++ b/test-dev/__snapshots__/dev.test.ts.snap
@@ -10,7 +10,7 @@ exports[`snowpack dev smoke: html 1`] = `
     <meta name=\\"description\\" content=\\"Web site created using create-snowpack-app\\" />
     <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/index.css\\" />
     <title>Snowpack App</title>
-  <script type=\\"module\\" integrity=\\"sha384-Z1OPSs1KV1TOmQHeoGF8XyUQcMaBnM0p0xip/dmSSpZWySqHrGOuQ5R4sSJgwPrM\\" src=\\"/__snowpack__/hmr-client.js\\"></script><script type=\\"module\\" integrity=\\"sha384-ZHQS30EqaFTVzyH5XP0i+sVAiN0+DiOd1AikxE6LsJbQaA40xjdaXluCLs/7hPlM\\" src=\\"/__snowpack__/hmr-error-overlay.js\\"></script></head>
+  <script type=\\"module\\" integrity=\\"sha384-Z1OPSs1KV1TOmQHeoGF8XyUQcMaBnM0p0xip/dmSSpZWySqHrGOuQ5R4sSJgwPrM\\" src=\\"/__snowpack__/hmr-client.js\\"></script><script type=\\"module\\" integrity=\\"sha384-LH/mFhEGRB4jHedP0nqOoIUwc4VX8eWJxEL+qTGWtroqiLJ2vxX169J0oSBMHL5o\\" src=\\"/__snowpack__/hmr-error-overlay.js\\"></script></head>
   <body>
     <img id=\\"img\\" src=\\"/logo.svg\\" />
     <canvas id=\\"canvas\\"></canvas>
