fix: frontend build

web/src/components/MemoContent/MermaidBlock.tsx

@@ -1,4 +1,3 @@
-import mermaid from "mermaid";
 import { useEffect, useRef } from "react";
 
 interface Props {
@@ -7,18 +6,21 @@ interface Props {
 
 const MermaidBlock: React.FC<Props> = ({ content }: Props) => {
   const mermaidDockBlock = useRef<null>(null);
-  mermaid.initialize({ startOnLoad: false, theme: "default" });
 
   useEffect(() => {
-    if (!mermaidDockBlock.current) {
-      return;
-    }
+    // Dynamically import mermaid to ensure compatibility with Vite
+    const initializeMermaid = async () => {
+      const mermaid = (await import("mermaid")).default;
+      mermaid.initialize({ startOnLoad: false, theme: "default" });
+      if (mermaidDockBlock.current) {
+        mermaid.run({
+          nodes: [mermaidDockBlock.current],
+        });
+      }
+    };
 
-    // Render mermaid when mounted.
-    mermaid.run({
-      nodes: [mermaidDockBlock.current],
-    });
-  });
+    initializeMermaid();
+  }, [content]);
 
   return (
     <pre ref={mermaidDockBlock} className="w-full p-2 whitespace-pre-wrap relative">

web/vite.config.ts

@@ -34,4 +34,13 @@ export default defineConfig({
       "@/": `${resolve(__dirname, "src")}/`,
     },
   },
+  build: {
+    rollupOptions: {
+      output: {
+        entryFileNames: "app.[hash].js",
+        chunkFileNames: "assets/chunk-vendors.[hash].js",
+        assetFileNames: "assets/[name].[hash][extname]",
+      },
+    },
+  },
 });