React 19 types compatibility

[snowystinger]

Initial checklist

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

Problem

React has removed the JSX global namespace in React 19, as a result, it needs to be accessed via the React global namespace now React.JSX.

node_modules/@mdx-js/react/lib/index.d.ts:29:85 - error TS2503: Cannot find namespace 'JSX'.

29 export function MDXProvider({ components, children, disableParentContext }: Props): JSX.Element;

Solution

Update references to JSX

Follow DefinitelyTyped/DefinitelyTyped#69022 for how to install the pre-release of the types and if you can, use the codemod

Alternatives

I don't think there's an alternative here

[ChristianMurphy]

See the discussion at DefinitelyTyped/DefinitelyTyped#69142
In particular DefinitelyTyped/DefinitelyTyped#69142 (comment) and DefinitelyTyped/DefinitelyTyped#69142 (comment)

[snowystinger]

Ah, thanks for the links, I find it hard to keep track of what's happening in definitely typed vs in the actual home of the project

[karlhorky]

Seems like there's another discussion thread over here:

• [react] Types for React 19 DefinitelyTyped/DefinitelyTyped#69022 (comment)

I asked about it in that thread, but maybe the plans for the global JSX namespace in React 19 types indicate that MDX and related packages should be importing JSX somehow instead of using it as a global namespace.

[eps1lon]

You need to do the same you're already doing for Preact and other libraries using JSX. Considering how you test types with other libraries, I'd assume you want something like DefinitelyTyped/DefinitelyTyped@ca06234 (#69142)

[wooorm]

Inlining what I believe Sebastian links to:

Users can support the unreleased version of React 19’s types by defining the JSX namespace that they remove:

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
  }
}