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:
@@ -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: {
|
||||
|
||||
Reference in New Issue
Block a user