From 05e29514952bf3ff3f30ec33c4bda66999d8486b Mon Sep 17 00:00:00 2001
From: Alexander Akait <4567934+alexander-akait@users.noreply.github.com>
Date: Wed, 27 Jan 2021 16:46:24 +0300
Subject: [PATCH] fix: hmr runtime on preloaded stylesheet link (#686)

---
 src/hmr/hotModuleReplacement.js           |  8 ++++++++
 test/HMR.test.js                          | 25 +++++++++++++++++++++++
 test/cases/hmr/expected/webpack-4/main.js |  8 ++++++++
 test/cases/hmr/expected/webpack-5/main.js |  8 ++++++++
 4 files changed, 49 insertions(+)

diff --git a/src/hmr/hotModuleReplacement.js b/src/hmr/hotModuleReplacement.js
index c5b1bbfd..2154dc7d 100644
--- a/src/hmr/hotModuleReplacement.js
+++ b/src/hmr/hotModuleReplacement.js
@@ -108,11 +108,19 @@ function updateCss(el, url) {
   newEl.isLoaded = false;
 
   newEl.addEventListener('load', () => {
+    if (newEl.isLoaded) {
+      return;
+    }
+
     newEl.isLoaded = true;
     el.parentNode.removeChild(el);
   });
 
   newEl.addEventListener('error', () => {
+    if (newEl.isLoaded) {
+      return;
+    }
+
     newEl.isLoaded = true;
     el.parentNode.removeChild(el);
   });
diff --git a/test/HMR.test.js b/test/HMR.test.js
index 6a2f0067..83a83a72 100644
--- a/test/HMR.test.js
+++ b/test/HMR.test.js
@@ -306,4 +306,29 @@ describe('HMR', () => {
       done();
     }, 100);
   });
+
+  it('should not remove old link when new link is loaded twice', (done) => {
+    const link = document.createElement('link');
+
+    link.innerHTML = '<link rel="preload stylesheet" href="./dist/main.css" />';
+    document.head.appendChild(link);
+    document.head.removeChild = jest.fn();
+
+    const update = hotModuleReplacement('./dist/main.css', {});
+
+    update();
+
+    setTimeout(() => {
+      const links = Array.prototype.slice.call(
+        document.querySelectorAll('link')
+      );
+
+      links[1].dispatchEvent(getLoadEvent());
+      links[1].dispatchEvent(getLoadEvent());
+
+      expect(document.head.removeChild).toHaveBeenCalledTimes(1);
+
+      done();
+    }, 100);
+  });
 });
diff --git a/test/cases/hmr/expected/webpack-4/main.js b/test/cases/hmr/expected/webpack-4/main.js
index 693d6d26..3ddc13a2 100644
--- a/test/cases/hmr/expected/webpack-4/main.js
+++ b/test/cases/hmr/expected/webpack-4/main.js
@@ -987,11 +987,19 @@ function updateCss(el, url) {
   newEl.isLoaded = false;
 
   newEl.addEventListener('load', () => {
+    if (newEl.isLoaded) {
+      return;
+    }
+
     newEl.isLoaded = true;
     el.parentNode.removeChild(el);
   });
 
   newEl.addEventListener('error', () => {
+    if (newEl.isLoaded) {
+      return;
+    }
+
     newEl.isLoaded = true;
     el.parentNode.removeChild(el);
   });
diff --git a/test/cases/hmr/expected/webpack-5/main.js b/test/cases/hmr/expected/webpack-5/main.js
index e364460e..3cc77dda 100644
--- a/test/cases/hmr/expected/webpack-5/main.js
+++ b/test/cases/hmr/expected/webpack-5/main.js
@@ -129,11 +129,19 @@ function updateCss(el, url) {
   newEl.isLoaded = false;
 
   newEl.addEventListener('load', () => {
+    if (newEl.isLoaded) {
+      return;
+    }
+
     newEl.isLoaded = true;
     el.parentNode.removeChild(el);
   });
 
   newEl.addEventListener('error', () => {
+    if (newEl.isLoaded) {
+      return;
+    }
+
     newEl.isLoaded = true;
     el.parentNode.removeChild(el);
   });