fix: bypass Cloudflare Rocket Loader with data-cfasync=false on module script

qectorlab · qectorlab · commit 137145048e90 · 2026-07-11T12:26:28.000-04:00
diff --git a/_headers b/_headers
@@ -4,6 +4,12 @@
   Referrer-Policy: strict-origin-when-cross-origin
   Permissions-Policy: camera=(), microphone=(), geolocation=()
   Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self' https:; frame-ancestors 'none'
+  Cache-Control: no-cache, no-store, must-revalidate
+  Pragma: no-cache
+  Expires: 0
+
+/assets/*
+  Cache-Control: public, max-age=31536000, immutable
 
 /.well-known/*
   Access-Control-Allow-Origin: *
diff --git a/index.html b/index.html
@@ -28,7 +28,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
     <title>QECTOR · Production-Grade Quantum Error Correction Decoding for Python</title>
-    <script type="module" crossorigin src="/assets/index-CaGUdrOG.js"></script>
+    <script type="module" data-cfasync="false" crossorigin src="/assets/index-CaGUdrOG.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-B4eLQ2k1.css">
   </head>
   <body>
diff --git a/source/public/_headers b/source/public/_headers
@@ -4,6 +4,12 @@
   Referrer-Policy: strict-origin-when-cross-origin
   Permissions-Policy: camera=(), microphone=(), geolocation=()
   Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self' https:; frame-ancestors 'none'
+  Cache-Control: no-cache, no-store, must-revalidate
+  Pragma: no-cache
+  Expires: 0
+
+/assets/*
+  Cache-Control: public, max-age=31536000, immutable
 
 /.well-known/*
   Access-Control-Allow-Origin: *
diff --git a/source/vite.config.ts b/source/vite.config.ts
@@ -4,13 +4,27 @@ import { defineConfig } from "vite"
 import { inspectAttr } from 'kimi-plugin-inspect-react'
 
 // https://vite.dev/config/
+// Cloudflare Rocket Loader rewrites <script type="module"> to
+// <script type="<random>-module">, breaking ESM and causing the browser to
+// download files instead. The data-cfasync="false" attribute tells Cloudflare
+// to skip Rocket Loader for that tag.
+function cfRocketBypass(): import('vite').Plugin {
+  return {
+    name: 'cf-rocket-bypass',
+    enforce: 'post',
+    transformIndexHtml(html) {
+      return html.replace(/(<script\s+type="module")/g, '$1 data-cfasync="false"')
+    },
+  }
+}
+
 export default defineConfig(({ command }) => ({
   base: '/',
   // inspectAttr() tags every JSX element with source file/line data attributes.
   // Useful in the editor while developing, but it has no business shipping to
   // production: it bloats the bundle and leaks internal file paths into the
   // live HTML. Only include it when Vite is running the dev server.
-  plugins: [...(command === 'serve' ? [inspectAttr()] : []), react()],
+  plugins: [...(command === 'serve' ? [inspectAttr()] : []), cfRocketBypass(), react()],
   server: {
     port: 3000,
   },
