src/lib/html/message-flash.html

@@ -1,6 +1,8 @@
-{{#if flash}}
-<div class="notification is-{{flash.type}}">
+<span>
+  {{#if flash}}
+  <div class="notification is-{{flash.type}}">
     <button class="delete" aria-label="Close"></button>
     <span role="alert"> {{ flash.message }} </span>
-</div>
-{{/if}}
+  </div>
+  {{/if}}
+</span>

src/lib/js/index.ts

@@ -4,7 +4,7 @@ document.addEventListener("DOMContentLoaded", () => {
     flashButtons.forEach((button) => {
         const flash = button.parentNode;
 
-        if (flash == null) {
+        if (flash === null) {
             console.error(
                 "Unreachable because our `querySelector` includes a parent; something went very wrong"
             );
@@ -12,12 +12,7 @@ document.addEventListener("DOMContentLoaded", () => {
         }
 
         flash.addEventListener("click", () => {
-            if (flash == null) {
-                console.error("Completely unreachable.");
-                return;
-            }
-
-            if (flash.parentNode == null) {
+            if (flash.parentNode === null) {
                 console.error(
                     "Notification not placed in DOM; something went very wrong"
                 );
@@ -26,6 +21,23 @@ document.addEventListener("DOMContentLoaded", () => {
 
             flash.parentNode.removeChild(flash);
         });
+
+        // In development, there won't be a web server hooked up to
+        // this to render the flash message, so we remove it entirely
+        if (process.env.NODE_ENV === "development") {
+            if (
+                flash.parentNode === null ||
+                flash.parentNode.parentNode === null
+            ) {
+                return;
+            }
+
+            console.warn("Disabling flash message");
+
+            // Get the containing <span> element
+            const block = flash.parentNode;
+            flash.parentNode.parentNode.removeChild(block);
+        }
     });
 });