React 19 support

[prichey]

Followup to #871

react-markdown relies on JSX being in the global namespace, which has been removed in @types/react^19.

Per @ChristianMurphy here:

A new issue would be better, we won't support React 19 RC, only GA.

React 19 is now GA, so this issue is to track.

[prichey]

@wooorm If I upgrade to React 19 in this repo and npm run build, I get the following error:

> [email protected] build
> tsc --build --clean && tsc --build && type-coverage

node_modules/hast-util-to-jsx-runtime/lib/index.d.ts:12:62 - error TS2503: Cannot find namespace 'JSX'.

12 export function toJsxRuntime(tree: Nodes, options: Options): JSX.Element;

In syntax-tree/hast-util-to-jsx-runtime@ae638ba you provide the solution of declaring a global JSX namespace. Would you recommend doing that here?

[0x80]

I tried the global JSX namespace suggestion

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

... but it doesn't seem to make a difference for the error I'm getting with React 19:

'ReactMarkdown' cannot be used as a JSX component.
Its type '(options: Readonly) => Element' is not a valid JSX element type.
Type '(options: Readonly) => Element' is not assignable to type '(props: any) => ReactNode | Promise'.
Type 'Element' is not assignable to type 'ReactNode | Promise'.ts(2786)

[steamwings]

I tried the global JSX namespace suggestion

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

...

Actually, this suggestion worked for me. Upgraded to Next.js 15 and React 19 without errors.

[wooorm]

Would you recommend doing that here?

Well, what I would recommend doing is speaking to the people that made this change: it’s not a bad change on its own, but it is a very useful feature and there is no alternative, plus this change means that millions of people need to change too. It’s just a lot of work. Not just for us here.

[prichey]

Thanks for getting this merged! Is there a plan to cut a new release?

[kierancap]

Thanks for getting this merged! Is there a plan to cut a new release?

Bumping this.

Or can we atleast have a pre-release tag so that we can override the builds failing from a TS error?

[wooorm]

No need to bump things — see the changelog

[prichey]

(This was released in 9.0.2)

[kierancap]

I'm still experiencing a build type error from react-markdown even on latest:

node_modules/react-markdown/lib/complex-types.ts:27:46 - error TS2344: Type 'TagName' does not satisfy the constraint 'ElementType<any, keyof IntrinsicElements>'.
storybook:types:   Type 'keyof IntrinsicElements' is not assignable to type 'ElementType<any, keyof IntrinsicElements>'.
storybook:types:     Type '"light"' is not assignable to type 'ElementType<any, keyof IntrinsicElements>'.
storybook:types:       Type 'TagName' is not assignable to type 'FunctionComponent<any>'.
storybook:types:         Type 'string' is not assignable to type 'FunctionComponent<any>'.
storybook:types:           Type 'string' is not assignable to type 'FunctionComponent<any>'.
storybook:types: 
storybook:types: 27     | ComponentType<ComponentPropsWithoutRef<TagName> & ReactMarkdownProps>
storybook:types:                                                 ~~~~~~~
storybook:types: 
storybook:types: 
storybook:types: Found 1 error in ../../packages/ui/node_modules/react-markdown/lib/complex-types.ts:27

Could be a different issue non-related to React 19?

ComponentPropsWithoutRef is being derived from @types/react of course - which for me is version 19.0.0

[remcohaszing]

Your trace references a file that doesn’t exist. You’re not using the latest version of react-markdown.

[kierancap]

Your trace references a file that doesn’t exist. You’re not using the latest version of react-markdown.

Ah yeah you're right.

Strange - I had specified the correct latest version in my package.json but npm i keeps installing a v8.0.7 (even though my -lock.json also has 9.0.3). Incredibly strange, but yeah you're right - Most likely this weird version behaviour!

Thanks for the help

EDIT: Seemed to have been npm cache - Annoying!