search

muxinc / media-chrome

Custom elements (web components) for making audio and video player controls that look great in your website or app.
https://media-chrome.org
MIT License
1.21k stars 62 forks source link

Can't import CJS version using Jest #886

Closed tzachyrm closed 1 week ago

tzachyrm commented 5 months ago

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/media-chrome@3.2.1/node_modules/media-chrome/dist/cjs/media-preview-chapter-display.js:56:68)
      at Object.<anonymous> (node_modules/.pnpm/media-chrome@3.2.1/node_modules/media-chrome/dist/cjs/index.js:103:52)
      at Object.<anonymous> (node_modules/.pnpm/media-chrome@3.2.1/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 commented 4 months ago

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.