fix: Quick fix to handle multiple hot updates for the same file

dlmr · web-flow · commit dfb2e73688c0 · 2018-03-27T14:14:32.000+02:00
diff --git a/hotModuleReplacement.js b/hotModuleReplacement.js
@@ -1,9 +1,10 @@
+var currentlyProcessing = {};
 module.exports = function(publicPath, outputFilename) {
   if (document) {
     var newHref = publicPath.match(/https?:/g) ? new URL(outputFilename, publicPath) : new URL(publicPath + outputFilename, window.location);
     var links = document.getElementsByTagName('link');
 
-	//update the stylesheet corresponding to `outputFilename`
+		//update the stylesheet corresponding to `outputFilename`
     for (var i = 0; i < links.length; i++) {
       if (links[i].href) {
         var oldChunk = new URL(links[i].href);
@@ -19,15 +20,24 @@ module.exports = function(publicPath, outputFilename) {
           link.charset = 'utf-8'
           link.type = 'text/css'
           link.rel = 'stylesheet'
-
+					
+					// TODO: Look into using __webpack_hash__
+					if (!currentlyProcessing[oldChunk.pathname]) {
+            currentlyProcessing[oldChunk.pathname] = [oldSheet];
+          } else {
+            currentlyProcessing[oldChunk.pathname].push(link);
+          }
           head.insertBefore(link, oldSheet.nextSibling)
 
           // remove the old sheet only after the old one loads so it's seamless
           // we gotta do it this way since link.onload basically doesn't work
           var img = document.createElement('img')
           img.onerror = function() {
-            oldSheet.remove()
-            console.log('[HMR]', 'Reload css: ', url);
+            if (currentlyProcessing[oldChunk.pathname]) {
+              currentlyProcessing[oldChunk.pathname].forEach(old => old.remove());
+              currentlyProcessing[oldChunk.pathname] = null;
+              console.log('[HMR]', 'Reload css: ', url);
+            }
           }
           img.src = url
           break;
