From 3f6423df33815f3efc5285cfbba869bdc989efb4 Mon Sep 17 00:00:00 2001
From: yangdx <gzdaniel@me.com>
Date: Mon, 1 Dec 2025 12:44:04 +0800
Subject: [PATCH] Fix KaTeX extension loading by moving imports to app startup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Move mhchem/copy-tex to main.tsx
• Add katex to Vite dedupe config
• Remove dynamic extension loading
• Ensure extensions available globally
• Fix chemistry formula rendering
---
 .../src/components/retrieval/ChatMessage.tsx           | 10 ++--------
 lightrag_webui/src/main.tsx                            |  3 +++
 lightrag_webui/vite.config.ts                          |  5 ++++-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/lightrag_webui/src/components/retrieval/ChatMessage.tsx b/lightrag_webui/src/components/retrieval/ChatMessage.tsx
index a4703e46..e490941c 100644
--- a/lightrag_webui/src/components/retrieval/ChatMessage.tsx
+++ b/lightrag_webui/src/components/retrieval/ChatMessage.tsx
@@ -76,21 +76,15 @@ export const ChatMessage = ({
     ? message.content
     : (displayContent !== undefined ? displayContent : (message.content || ''))
 
-  // Load KaTeX dynamically with extensions
+  // Load KaTeX rehype plugin dynamically
+  // Note: KaTeX extensions (mhchem, copy-tex) are imported statically in main.tsx
   useEffect(() => {
     const loadKaTeX = async () => {
       try {
-        // Load KaTeX extensions (must be loaded before rehype-katex)
-        // 1. mhchem: enables \ce and \pu commands for chemistry formulas
-        await import('katex/contrib/mhchem');
-        // 2. copy-tex: allows users to copy rendered formulas as LaTeX source code
-        await import('katex/contrib/copy-tex');
-        // Then load rehype-katex
         const { default: rehypeKatex } = await import('rehype-katex');
         setKatexPlugin(() => rehypeKatex);
       } catch (error) {
         console.error('Failed to load KaTeX plugin:', error);
-        // Set to null to ensure we don't try to use a failed plugin
         setKatexPlugin(null);
       }
     };
diff --git a/lightrag_webui/src/main.tsx b/lightrag_webui/src/main.tsx
index fb234a60..95a3e587 100644
--- a/lightrag_webui/src/main.tsx
+++ b/lightrag_webui/src/main.tsx
@@ -4,6 +4,9 @@ import './index.css'
 import AppRouter from './AppRouter'
 import './i18n.ts';
 import 'katex/dist/katex.min.css';
+// Import KaTeX extensions at app startup to ensure they are registered before any rendering
+import 'katex/contrib/mhchem'; // Chemistry formulas: \ce{} and \pu{}
+import 'katex/contrib/copy-tex'; // Allow copying rendered formulas as LaTeX source
 
 
 
diff --git a/lightrag_webui/vite.config.ts b/lightrag_webui/vite.config.ts
index f39969c6..c89c34b4 100644
--- a/lightrag_webui/vite.config.ts
+++ b/lightrag_webui/vite.config.ts
@@ -10,7 +10,10 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src')
-    }
+    },
+    // Force all modules to use the same katex instance
+    // This ensures mhchem extension registered in main.tsx is available to rehype-katex
+    dedupe: ['katex']
   },
   // base: import.meta.env.VITE_BASE_URL || '/webui/',
   base: webuiPrefix,