[react-markdown] ReactMarkdown Components TypeScript Error

[s7tya]

Hi. I'm beginer of TypeScript.
I got an error when using react-markdown and react-syntax-highlighter.
I just copied and pasted the sample code on README.
Anyone knows how to fix this?

• Next.js
• ReactMarkdown 6.0.2
• react syntax highlighter

import ReactMarkdown from 'react-markdown'
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
import {dark} from 'react-syntax-highlighter/dist/cjs/styles/prism'

const components = {
  code({node, inline, className, children, ...props}) {
    const match = /language-(\w+)/.exec(className || '')
    return !inline && match ? (
      <SyntaxHighlighter style={dark} language={match[1]} PreTag="div" children={String(children).replace(/\n$/, '')} {...props} />
    ) : (
      <code className={className} {...props} />
    )
  }
}

..,

<ReactMarkdown children={body} components={ components } />
...

(JSX attribute) components?: Partial<NormalComponents & SpecialComponents>
Type '{ code({ node, className, inline, ...props }: { [x: string]: any; node: any; className: any; inline: any; }): Element; }' is not assignable to type 'Partial<NormalComponents & SpecialComponents>'.
  Types of property 'code' are incompatible.
    Type '({ node, className, inline, ...props }: { [x: string]: any; node: any; className: any; inline: any; }) => Element' is not assignable to type 'keyof IntrinsicElements | CodeComponent'.
      Type '({ node, className, inline, ...props }: { [x: string]: any; node: any; className: any; inline: any; }) => Element' is not assignable to type 'CodeComponent'.
        Types of parameters '__0' and 'props' are incompatible.
          Type 'ReactBaseProps & ReactMarkdownProps & { inline?: boolean; }' is not assignable to type '{ [x: string]: any; node: any; className: any; inline: any; }'.
            Property 'className' is optional in type 'ReactBaseProps & ReactMarkdownProps & { inline?: boolean; }' but required in type '{ [x: string]: any; node: any; className: any; inline: any; }'.ts(2322)
ast-to-react.d.ts(161, 3): The expected type comes from property 'components' which is declared here on type 'IntrinsicAttributes & Pick<ReactMarkdownOptions, "className" | "children" | keyof PluginOptions | keyof RehypeFilterOptions | keyof TransformOptions> & Pick<...> & Pick<...>'

[ChristianMurphy]

TypeScript is alerting you that you've implicitly typed className as required, but it is optional.
There are two ways you could go about resolving this, both involve more explicitly typing.
The first, move components inline

<ReactMarkdown children={body} components={ components: {
  code({node, inline, className, children, ...props}) {
    const match = /language-(\w+)/.exec(className || '')
    return !inline && match ? (
      <SyntaxHighlighter style={dark} language={match[1]} PreTag="div" children={String(children).replace(/\n$/, '')} {...props} />
    ) : (
      <code className={className} {...props} />
    )
  }
} } />

this allows typescript to use ReactMarkdown's types directly.

The second would be to import the code component type from react markdown, and use that for prop types.

import type { CodeComponent } from 'react-markdown/ast-to-react'

type CodeProps = Parameters<CodeComponent>[0]

const components = {
  code({node, inline, className, children, ...props}: CodeProps) {
    const match = /language-(\w+)/.exec(className || '')
    return !inline && match ? (
      <SyntaxHighlighter style={dark} language={match[1]} PreTag="div" children={String(children).replace(/\n$/, '')} {...props} />
    ) : (
      <code className={className} {...props} />
    )
  }
}

// ...

<ReactMarkdown children={body} components={ components } />

[s7tya]

sorry for my late reply!
it worked! i'd appreciate it.

[dbroadhurst]

I had to modify both suggestions

First

<ReactMarkdown children={body} components={ components: {
  code({node, inline, className, children, ...props}) {
    const match = /language-(\w+)/.exec(className || '')
    return !inline && match ? (
      <SyntaxHighlighter style={dark} language={match[1]} PreTag="div" children={String(children).replace(/\n$/, '')} {...props} />
    ) : (
      <code className={className} {...props} />
    )
  }
} } />

to

components={{
          code({ node, inline, className, children, ...props }) {
            const match = /language-(\w+)/.exec(className || '')
            return !inline && match ? (
              <SyntaxHighlighter
                style={dark}
                language={match[1]}
                PreTag="div"
                children={String(children).replace(/\n$/, '')}
                {...props}
              />
            ) : (
              <code className={className} {...props} />
            )
          },
        }}

Second

import type { CodeComponent } from 'react-markdown/ast-to-react'

to

import type { CodeComponent } from 'react-markdown/src/ast-to-react'

[nkhil]

import type { CodeComponent } from 'react-markdown/src/ast-to-react'

is now

import type { CodeComponent } from 'react-markdown/lib/ast-to-react'

[nicholasdly]

I was getting a type error implementing the marked answer's second solution, but considering it's been three years it's probably just outdated.

I found a pre-defined CodeProps type that did the trick:

import { CodeProps } from "react-markdown/lib/ast-to-react";

const components = {
  code({node, inline, className, children, ...props}: CodeProps) {
    const match = /language-(\w+)/.exec(className || '')
    return !inline && match ? (
      <SyntaxHighlighter style={dark} language={match[1]} PreTag="div" children={String(children).replace(/\n$/, '')} {...props} />
    ) : (
      <code className={className} {...props} />
    )
  }
}