fix: error when reloading async chunk (#633)

Author: cap-Bernardito

src/hmr/hotModuleReplacement.js

@@ -143,6 +143,10 @@ function getReloadUrl(href, src) {
 }
 
 function reloadStyle(src) {
+  if (!src) {
+    return false;
+  }
+
   const elements = document.querySelectorAll('link');
   let loaded = false;
 

test/HMR.test.js

@@ -259,6 +259,31 @@ describe('HMR', () => {
     }, 100);
   });
 
+  it('should reloads with non-file script in the end of page', (done) => {
+    document.body.appendChild(document.createElement('script'));
+
+    const update = hotModuleReplacement('./src/non_file_styles.css', {});
+
+    update();
+
+    setTimeout(() => {
+      expect(console.log.mock.calls[0][0]).toMatchSnapshot();
+
+      const links = Array.prototype.slice.call(
+        document.querySelectorAll('link')
+      );
+
+      expect(links[0].visited).toBe(true);
+      expect(document.head.innerHTML).toMatchSnapshot();
+
+      links[1].dispatchEvent(getLoadEvent());
+
+      expect(links[1].isLoaded).toBe(true);
+
+      done();
+    }, 100);
+  });
+
   it('should handle error event', (done) => {
     const update = hotModuleReplacement('./src/style.css', {});
 

test/__snapshots__/HMR.test.js.snap

@@ -24,6 +24,10 @@ exports[`HMR should reloads with non http/https link href 1`] = `"[HMR] css relo
 
 exports[`HMR should reloads with non http/https link href 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\"><link rel=\\"shortcut icon\\" href=\\"data:;base64,=\\">"`;
 
+exports[`HMR should reloads with non-file script in the end of page 1`] = `"[HMR] Reload all css"`;
+
+exports[`HMR should reloads with non-file script in the end of page 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
+
 exports[`HMR should work reload all css 1`] = `"[HMR] Reload all css"`;
 
 exports[`HMR should work reload all css 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;

test/cases/hmr/expected/webpack-4/main.js

@@ -1022,6 +1022,10 @@ function getReloadUrl(href, src) {
 }
 
 function reloadStyle(src) {
+  if (!src) {
+    return false;
+  }
+
   const elements = document.querySelectorAll('link');
   let loaded = false;
 

test/cases/hmr/expected/webpack-5/main.js

@@ -164,6 +164,10 @@ function getReloadUrl(href, src) {
 }
 
 function reloadStyle(src) {
+  if (!src) {
+    return false;
+  }
+
   const elements = document.querySelectorAll('link');
   let loaded = false;