Bug: Strict TypeScript error with ESModules

[dylanjha]

Is there an existing issue for this?

• I have searched the existing issues

Which Mux Elements/Packages does this apply to? Select all that apply

mux-player-react

Which browsers are you using?

Other (add details below)

Which operating systems are you using?

macOS

Description

A simple react component like this:

import MuxPlayer from '@mux/mux-player-react';
const Foo = () => <MuxPlayer />;

Gives us the following TypeScript error with modern ESModules and a strict TypeScript config:

error TS2604: JSX element type 'MuxPlayer' does not have any construct or call signatures.

28       <MuxPlayer
          ~~~~~~~~~

src/components/custom/mediaPlayer/MediaPlayer.tsx:28:8 - error TS2786: 'MuxPlayer' cannot be used as a JSX component.
  Its type 'typeof import("/node_modules/@mux/mux-player-react/dist/types/index")' is not a valid JSX element type.

28       <MuxPlayer
          ~~~~~~~~~

Reduced test case

No response

Steps to reproduce

Try reproducing this with a strict TS Config

Current Behavior

Error building

Expected Behavior

No error building

Errors

No response

What version of the package are you using?

No response

[luwes]

@dylanjha what is the moduleResolution?

[rileytomasek]

@luwes @dylanjha filed this for me. Here is the tsconfig.json compiler options:

{
  "compilerOptions": {
    "allowImportingTsExtensions": false,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "checkJs": true,
    "declaration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "incremental": false,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "lib": ["esnext", "dom", "dom.iterable"],
    "module": "NodeNext",
    "moduleDetection": "force",
    "moduleResolution": "NodeNext",
    "noEmit": true,
    "preserveWatchOutput": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "es2022",
    "verbatimModuleSyntax": true
  }
}

[luwes]

I tested the tsconfig above with a fresh Vite app and I can't reproduce it unfortunately.

Are you using a framework?
Could you try restarting the TS server? sometimes that acts strangely when (re)installing node_modules.

[luwes]

closing as I couldn't repro this