diff --git a/gadget-code/frontend/src/components/EditorPanel.tsx b/gadget-code/frontend/src/components/EditorPanel.tsx
index 8ec37c2..5903422 100644
--- a/gadget-code/frontend/src/components/EditorPanel.tsx
+++ b/gadget-code/frontend/src/components/EditorPanel.tsx
@@ -1,6 +1,11 @@
-import { useState, useCallback, useEffect } from "react";
-import Ace from "react-ace";
-import ace from "ace-builds";
+import { useState, useCallback, useEffect } from 'react';
+import * as ReactAceModule from 'react-ace';
+import * as aceModule from 'ace-builds';
+
+// react-ace v14 ships CommonJS, so the default export may be nested under
+// `.default` when Vite pre-bundles it for the dev server. Handle both cases.
+const Ace = (ReactAceModule as any).default || ReactAceModule;
+const ace = (aceModule as any).default || aceModule;
 
 // ── Vite ?url imports for ACE modes ──────────────────────────────────────
 // These resolve at build time to asset URLs. We register them with ACE's