How to properly type pre components?

[Californian]

I have the following code:

<ReactMarkdown
  remarkPlugins={[remarkGfm]}
  components={{
    code: ({ node, className, children, ref, ...props }) => (
      <Code {...props}>{String(children).replace(/\n$/, "")}</Code>
    ),
    pre: ({
      children: {
        props: { node, className, children, ref, ...props },
      },
    }) => (
      <CodeHighlight
        language={(className ?? "").replace(/^language-/i, "")}
        code={String(children).replace(/\n$/, "")}
        {...props}
      />
    ),
  }}
>
  {body}
</ReactMarkdown>

Typescript complains that Property 'props' does not exist on type 'ReactNode'., but everything works as expected and, indeed, there is a property props on the children. Perhaps children needs to be typed differently?

I'm not sure I'm particularly clear on the API here and it's a small part of our codebase so I honestly just don't want to spend a ton of time trying to grok the underlying code. I would, however, like typescript to not complain (and not by just casting it as any, as I fear this may indicate a larger problem with edge cases into which I could later run).

I have read the other issues/discussions on this topic, and I saw the linked upgrade (https://github.com/remarkjs/react-markdown/blob/main/changelog.md#remove-extra-props-passed-to-certain-components) and its not-very-clear upgrade suggestion ("create a plugin or use pre for the block" -- creating a plugin seems like a heavy lift for a user to replicate functionality that used to exist, and "use pre" is what I'm attempting here but obviously that's not as simple as is implied).

What am I missing here?

[wooorm]

JSX.IntrinsicElements['pre'] & ExtraProps, where ExtraProps is https://github.com/remarkjs/react-markdown/tree/main?tab=readme-ov-file#extraprops.

[ChristianMurphy]

Welcome @Californian! 👋

How to properly type pre components?

As @wooorm mentions JSX.IntrinsicElements['pre'] & ExtraProps is the correct type

Typescript complains that Property 'props' does not exist on type 'ReactNode'., but everything works as expected and, indeed, there is a property props on the children. Perhaps children needs to be typed differently?

TypeScript is correct, props is not guaranteed to be on children.
children could also be null, a string, or a list of elements.
You happen to have props on the documents you have tested, but don't rely on that assumption.
Instead consider something like:

import { isValidElement } from "react";

// ...

<ReactMarkdown
  components={{
    pre: ({ children }) => {
      if (isValidElement(children)) {
        const {
          node,
          className,
          children: innerChildren,
          ref,
          ...props
        } = children.props;

        return (
          <CodeHighlight
            language={(className ?? "").replace(/^language-/i, "")}
            code={String(innerChildren).replace(/\n$/, "")}
            {...props}
          />
        );
      }
    },
  }}
>
  {body}
</ReactMarkdown>;

example in sandbox: https://stackblitz.com/edit/github-porffk

What am I missing here?

How the children prop works in React, this is not specific to react-markdown this is an unsafe to directly access props from children on any React component.

[Californian]

Thanks a bunch for this clear explanation! It did indeed solve my problem.

You happen to have props on the documents you have tested, but don't rely on that assumption.

That's precisely why I didn't want to use a hacky workaround to get TS to ignore this, so thanks!

What is it about this component that makes its children nested, as opposed to the <code> element whose children are just the input text? Is it possible for some input text to cause an array of children, such that the above function wouldn't fully render the text (in which case I could refactor it to a function that iterates over the children)?

[ChristianMurphy]

react-markdown has both HTML support https://github.com/remarkjs/react-markdown#appendix-a-html-in-markdown which can put different content inside the <pre> tag. (for example https://stackblitz.com/edit/github-porffk-tgkrye?file=src%2Fapp.tsx)
and remark and rehype plugins, which can also put different contents inside the <pre> tag.

[Californian]

I see! So this would be in the scenario where input might be raw html <pre> tags, not in the scenario where triple-backticks are used to input multiline code. Thanks again!