fix(infra): bypass Cloudflare Rocket Loader — breaks ES module scripts

Cloudflare Rocket Loader transforms <script type="module"> into
type="<hash>-module", which the browser cannot parse as ES module.
The React app never mounts — blank page on every route.

Fix: Vite plugin adds data-cfasync="false" attribute to the module
script tag, telling Rocket Loader to skip transformation.

Also: remove dist/ from the commit (build artifacts excluded).
This commit is contained in:
asepharyana
2026-07-02 06:30:26 +07:00
parent d53ec74d64
commit 112b865a5b
+16 -2
View File
@@ -1,8 +1,22 @@
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import { defineConfig, type Plugin } from "vite";
/** Cloudflare Rocket Loader breaks ES module scripts by rewriting type="module".
* Adding data-cfasync="false" tells Rocket Loader to skip this script. */
function cloudflareCompat(): Plugin {
return {
name: "cloudflare-compat",
transformIndexHtml(html) {
return html.replace(
'<script type="module" crossorigin',
'<script type="module" data-cfasync="false" crossorigin',
);
},
};
}
export default defineConfig({
plugins: [react()],
plugins: [react(), cloudflareCompat()],
build: {
rolldownOptions: {
checks: {