fix(interop): unwrap CJS default exports (react-player, @emoji-mart/react)

[oliverlaz]

🎯 Goal

Fix a runtime crash — Uncaught Error: Element type is invalid: expected a string ... but got: object — when components backed by externalized CommonJS dependencies are rendered under spec-strict ESM↔CJS interop. Two components are affected:

• VideoPlayer → react-player
• EmojiPicker → @emoji-mart/react

This first surfaced in the Vite example, which consumes the SDK's built ESM (dist/es) as a linked workspace dependency. Vite 8 swapped its dependency optimizer from esbuild to Rolldown. esbuild honored the Babel __esModule marker and unwrapped .default; Rolldown follows spec-strict interop where a CJS module's ESM default export is module.exports itself. So import ReactPlayer from 'react-player' (and import Picker from '@emoji-mart/react') now resolve to the module namespace { default, __esModule } — an object — and rendering it throws. Native Node ESM behaves identically, so this was never spec-portable; it only worked under bundlers that honored __esModule.

🛠 Implementation details

Both packages ship as CJS with the real export on exports.default. We unwrap the interop default defensively at each import site:

import ReactPlayerImport from 'react-player';
const ReactPlayer =
  (ReactPlayerImport as unknown as { default?: typeof ReactPlayerImport }).default ??
  ReactPlayerImport;

import PickerImport from '@emoji-mart/react';
const Picker =
  (PickerImport as unknown as { default?: typeof PickerImport }).default ?? PickerImport;

When the bundler already provides the component (the normal case — esbuild, webpack, pre-Vite-8), .default is undefined and it falls back to the import unchanged. So this is a no-op for existing consumers and resolves the got: object crash only where the namespace leaks through.

Audit. Every default-imported externalized dependency in src/ was checked against native-Node-ESM (≡ Rolldown strict) interop. Only react-player and @emoji-mart/react exhibit the hazard signature (object default carrying { __esModule, default }). All others are safe:

• Classic CJS exporting the value on module.exports: clsx, dayjs + all dayjs/plugin/*, lodash.debounce/mergewith/throttle/uniqby, emoji-regex, fix-webm-duration, react-fast-compare, moment-timezone
• Real ESM: react-markdown, remark-gfm
• Legitimately object-valued defaults used correctly (member access / valid React element type): react (namespace), i18next (instance), react-textarea-autosize (forwardRef)

Files changed: src/components/VideoPlayer/VideoPlayer.tsx, src/plugins/Emojis/EmojiPicker.tsx. tsc, eslint, and prettier are clean; existing VideoAttachment tests pass.

🎨 UI Changes

No visual changes. Restores VideoPlayer and EmojiPicker rendering in environments where they previously crashed (Vite 8 / Rolldown, native Node ESM, strict-interop SSR). No screenshots applicable.

[github-actions]

Size Change: +69 B (+0.01%)

Total Size: 651 kB

📦 View Changed

Filename	Size	Change
dist/cjs/emojis.js	2.54 kB	+10 B (+0.4%)
dist/cjs/index.js	256 kB	+18 B (+0.01%)
dist/es/emojis.mjs	2.47 kB	+16 B (+0.65%)
dist/es/index.mjs	253 kB	+21 B (+0.01%)
dist/es/useNotificationApi.mjs	44.9 kB	+4 B (+0.01%)

ℹ️ View Unchanged

Filename	Size
dist/cjs/audioProcessing.js	1.74 kB
dist/cjs/mp3-encoder.js	814 B
dist/cjs/useNotificationApi.js	46.2 kB
dist/css/emoji-picker.css	178 B
dist/css/emoji-replacement.css	456 B
dist/css/index.css	39.7 kB
dist/es/audioProcessing.mjs	1.65 kB
dist/es/mp3-encoder.mjs	768 B

_{compressed-size-action}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.71%. Comparing base (ce4352d) to head (54bf3b0).

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3199      +/-   ##
==========================================
- Coverage   83.73%   83.71%   -0.03%     
==========================================
  Files         435      435              
  Lines       13127    13129       +2     
  Branches     4249     4251       +2     
==========================================
- Hits        10992    10991       -1     
- Misses       2135     2138       +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.