fix(vite): add data-cfasync="false" to script tags to prevent Cloudflare Rocket Loader breaking JS

Cloudflare Rocket Loader rewrites <script type="module"> to <script type="randomhash-module"> which browsers can't parse, causing complete blank page. data-cfasync="false" disables this. Co-Authored-By: Claude <noreply@anthropic.com>
2026-06-15 23:00:30 +07:00
1 changed files with 16 additions and 1 deletions
@@ -9,7 +9,22 @@ export default defineConfig(({ mode }) => {
  const apiProxyTarget = env.VITE_API_PROXY_TARGET || 'http://localhost:3000';

  return {
-    plugins: [react(), tsconfigPaths(), metricsPlugin()],
+    plugins: [
+      react(),
+      tsconfigPaths(),
+      metricsPlugin(),
+      {
+        name: 'cloudflare-rocket-loader-fix',
+        transformIndexHtml(html) {
+          // Prevent Cloudflare Rocket Loader from mangling <script type="module">
+          // which breaks the entire JS bundle (blank page)
+          return html.replace(
+            /<script type="module"/g,
+            '<script data-cfasync="false" type="module"',
+          );
+        },
+      },
+    ],
    server: {
      proxy: {
        '/api': apiProxyTarget,