dtp/gadget
1
0
Fork 0
Code Actions Packages Projects Releases Activity

fix: handle CJS default export interop for react-ace v14 in Vite dev server

Browse Source 
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.
This commit is contained in:
Rob Colbert 2026-05-12 21:47:51 -04:00
parent 37907ef098
commit dc54ea3dec
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
gadget-code/frontend/src/components/EditorPanel.tsx
View File

@ -1,6 +1,11 @@
import { useState, useCallback, useEffect } from "react"; import { useState, useCallback, useEffect } from 'react';
import Ace from "react-ace"; import * as ReactAceModule from 'react-ace';
import ace from "ace-builds"; 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 ────────────────────────────────────── // ── Vite ?url imports for ACE modes ──────────────────────────────────────
// These resolve at build time to asset URLs. We register them with ACE's // These resolve at build time to asset URLs. We register them with ACE's