From dc54ea3decf43ace31f5e98a128e8f6afff0bff9 Mon Sep 17 00:00:00 2001 From: Rob Colbert Date: Tue, 12 May 2026 21:47:51 -0400 Subject: [PATCH] fix: handle CJS default export interop for react-ace v14 in Vite dev server react-ace v14 ships CommonJS only ('main': 'lib/index.js'). Vite's dev server pre-bundling wraps CJS modules as namespace objects where the default export is nested under .default. This caused 'Element type is invalid: got object' because import Ace from 'react-ace' resolved to the module namespace instead of the React component. Fix: import * as ReactAceModule and extract default with fallback: const Ace = ReactAceModule.default || ReactAceModule Same treatment for ace-builds import. Production build (Rolldown) was unaffected due to different CJS interop handling. --- gadget-code/frontend/src/components/EditorPanel.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) 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