Components type error

[glebec]

This package looks like a perfect fit for our use case, but currently seems to have a type error, at least with our current package versions.

Playground Demo

Click here to view the issue in the TS Playground

Environment

Vite / TypeScript / React:

// Package.json (truncated)
{
    "dependencies": {
        "react": "^19.1.0", // (latest is 19.1.1)
        "react-markdown": "^10.1.0", // (latest)
        "react-markdown-with-mdx": "^1.0.1", (latest)
    }
}

Expected

Should compile without type errors:

import Markdown from 'react-markdown'
import { type MdxComponents, withMdx } from 'react-markdown-with-mdx'

const MarkdownWithMdx = withMdx(Markdown)

const COMPONENTS = {
    Example: () => <p>Hello</p>,
} satisfies MdxComponents

const _breaks = <MarkdownWithMdx components={COMPONENTS} />
//                               ^type error

Actual

components prop is flagged by TypeScript:

No overload matches this call.
  Overload 1 of 2, '(props: WithMdxOptions, context?: any): string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | ... 4 more ... | undefined', gave the following error.
    Type '{ Example: () => Element; }' has no properties in common with type 'Components'.
  Overload 2 of 2, '(props: WithMdxOptions): string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | ... 4 more ... | undefined', gave the following error.
    Type '{ Example: () => Element; }' has no properties in common with type 'Components'.ts(2769)

index.d.ts(107, 5): The expected type comes from property 'components' which is declared here on type 'IntrinsicAttributes & WithMdxOptions'

index.d.ts(107, 5): The expected type comes from property 'components' which is declared here on type 'IntrinsicAttributes & WithMdxOptions'

(property) components?: Components | null | undefined

Map tag names to components.

Offhand, it looks like the issue is that the React-Markdown Components prop specifies only intrinsic JSX keys, and the MdxComponents type uses an & intersection with its string index, but the components prop will still only accept known keys (not an open string index type).

As a temporary mitigation I can sidestep this using a cast:

const COMPONENTS = {
    Example: () => <p>Hello</p>,
} satisfies MdxComponents as Components

But obviously long-term that's not good.