Typescript Error ts(2322) for Nested MDX Components in React19 environment

[talatkuyuk]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and discussions and couldn’t find anything (or linked relevant results below)

Affected package

mdx/types@latest

Steps to reproduce

Related with the type MDXComponents of @types/mdx, I am facing a typescript error ts2322 in react19 environment (no problem with react18):

import React from "react";
import { evaluate } from "@mdx-js/mdx";
import * as runtime from "react/jsx-runtime";
import type { MDXComponents } from "mdx/types";

export default async function Home() {
  const { default: MDXContent } = await evaluate("<motion.p />", runtime);

  const components: MDXComponents = {
    motion: { p: () => <p>Hello world</p> },
  };

  return MDXContent({ components });
}

The type MDXComponents raises an error for nested MDX components, under the motion key specifically in above example , saying:

Type '{ p: () => React.JSX.Element; }' is not assignable to type '(NestedMDXComponents | Component<any>) & (Component<JSX.IntrinsicElements> | undefined)'.
  Type '{ p: () => React.JSX.Element; }' is not assignable to type 'NestedMDXComponents & (new (props: JSX.IntrinsicElements) => JSX.ElementClass)'.
    Type '{ p: () => React.JSX.Element; }' is not assignable to type 'new (props: JSX.IntrinsicElements) => JSX.ElementClass'.
      Type '{ p: () => Element; }' provides no match for the signature 'new (props: JSX.IntrinsicElements): JSX.ElementClass'.ts(2322)

I suppose the typescript can not narrow NestedMDXComponents to FunctionComponent<Props> or ClassComponent<Props>. I don't know the issue may be related with JSX issue, because when I add the code suggested by @wooorm disappears the error, but couldn't figure out the reason.

import type { JSX as Jsx } from "react/jsx-runtime";

declare global {
  namespace JSX {
    type ElementClass = Jsx.ElementClass;
    type Element = Jsx.Element;
    type IntrinsicElements = Jsx.IntrinsicElements;
  }
}

I also saw a typescript comment in the documentation (using-mdx.mdx) here

// @errors: 2322 -- something with React 19 and nested components.

I created two minimal apps with Next.js to investigate the error:

• First app is Next.js@15 (React19), having typescript error for the type MDXComponents for nested MDX components.
• Second app is Next.js@14 (React18), having NO typescript error for nested MDX components.

Actual behavior

The typescript throws aforementioned error for the type MDXComponents for nested MDX components in React19 environment.

Expected behavior

Normally, it would work with nested MDX components without any typescript error.

Runtime

node@20

Package manager

npm@11

Operating system

macOS@latest

Build and bundle tools

Next.js

[wooorm]

@types/react indeed removed JSX. JSX is needed otherwise the types cannot work. There is no alternative to support all frameworks if frameworks do not specify their types somehow. So it is indeed recommended to type JSX like that