From 3c9ed2ef3ee507153eecfef412d18c70414a7eba Mon Sep 17 00:00:00 2001
From: Miao Wang <shankerwangmiao@gmail.com>
Date: Thu, 10 Apr 2025 21:01:08 +0800
Subject: [PATCH] detect if es module can be loaded

---
 _includes/vite_script.html      | 25 +++++++++++++++++++++----
 _src/entrypoints/moduleGuard.ts |  1 +
 2 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 _src/entrypoints/moduleGuard.ts

diff --git a/_includes/vite_script.html b/_includes/vite_script.html
index 16c2cf2..a22f254 100644
--- a/_includes/vite_script.html
+++ b/_includes/vite_script.html
@@ -27,16 +27,21 @@
 <script src="{% vite_asset_path /vite/legacy-polyfills-legacy %}" crossorigin="anonymous" id="vite-legacy-polyfill" nomodule></script>
 {% capture legacyFile %}{% vite_asset_path {{ entry }}-legacy.ts %}{% endcapture %}
 <script nomodule defer>System.import({{ legacyFile | jsonify }});</script>
+<!--
+  load moduleGuard.ts as a module, to detect whether the browser can correctly
+  load the module.
+  Sometimes if we are behind a proxy, the scripts may be wrapped in a function
+  and the module may not be loaded correctly.
+  In that case, we will load the legacy build.
+-->
+<script src="{% vite_asset_path moduleGuard.ts %}" crossorigin="anonymous" type="module"></script>
 <!--
   jekyll-minifier only minify scripts with type="application/javascript",
   here data-dummytype is added to trick jekyll-minifier to minify the script.
 -->
 <script data-dummytype="application/javascript" type="module">
   (function(){
-    try{
-      new Function("m","return import(m)");
-    }catch(e){
-      console.warn("vite: loading legacy build because dynamic import is unsupported, syntax error above should be ignored");
+    var loadLegacy = function() {
       var polyScript = document.getElementById("vite-legacy-polyfill");
       var newScript = document.createElement("script");
       newScript.src = polyScript.src;
@@ -45,5 +50,17 @@
       };
       document.body.appendChild(newScript);
     }
+    try{
+      new Function("m","return import(m)");
+      document.addEventListener("DOMContentLoaded", function(){
+        if(!document.documentElement.hasAttribute("data-module-loaded")){
+          console.warn("vite: loading legacy build because esm module is not loaded");
+          loadLegacy();
+        }
+      });
+    }catch(e){
+      console.warn("vite: loading legacy build because dynamic import is unsupported, syntax error above should be ignored");
+      loadLegacy();
+    }
   })();
 </script>
diff --git a/_src/entrypoints/moduleGuard.ts b/_src/entrypoints/moduleGuard.ts
new file mode 100644
index 0000000..3381a2d
--- /dev/null
+++ b/_src/entrypoints/moduleGuard.ts
@@ -0,0 +1 @@
+document.documentElement.setAttribute("data-module-loaded", "true");