React 19 types compatibility

[snowystinger]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] 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 https://github.com/DefinitelyTyped/DefinitelyTyped/pull/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 https://github.com/DefinitelyTyped/DefinitelyTyped/pull/69142 In particular https://github.com/DefinitelyTyped/DefinitelyTyped/pull/69142#issuecomment-2037677573 and https://github.com/DefinitelyTyped/DefinitelyTyped/pull/69142#issuecomment-2049931211

[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:

• https://github.com/DefinitelyTyped/DefinitelyTyped/pull/69022#discussion_r1652550623

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