Can't import CJS version using Jest

[tzachyrm]

We're importing some React components, e.g.

import { MediaController } from "media-chrome/react";

In our production build (Webpack, ESM) this works fine, but when using Jest (which uses CJS), we receive the following error:

TypeError: Class extends value #<Object> is not a constructor or null

at Object.<anonymous> (node_modules/.pnpm/[email protected]/node_modules/media-chrome/dist/cjs/media-preview-chapter-display.js:56:68)
      at Object.<anonymous> (node_modules/.pnpm/[email protected]/node_modules/media-chrome/dist/cjs/index.js:103:52)
      at Object.<anonymous> (node_modules/.pnpm/[email protected]/node_modules/media-chrome/dist/cjs/react/index.js:75:16)

I've narrowed it down to a single problematic line in media-chrome/dist/cjs/media-preview-chapter-display.js:

var import_media_text_display = __toESM(require("./media-text-display.js"), 1);

Changing it to var import_media_text_display = require("./media-text-display.js"); seems to fix the issue, at least in my case.

I'm not an expert, but this seems to be an esbuild issue.

media-chrome version: 3.2.1
node version: v18.14.2
jest version: 29.7.0

[JuhG]

We were running into the same issue.

Changing our babel config fixed this. This was our old config:

 presets: [
    [
      "@babel/preset-env",
      { modules: "commonjs" },
    ],
    // ...
  ],

Removing the modules: "commonjs" part fixed the issue (which now defaults to auto), but not sure how it affects everything else. Looks like there's an issue with running media-chrome in a CJS module system.