[react-markdown] getting error Type '(instance: HTMLElement | null) => void' is not assignable to type '(instance: SyntaxHighlighter | null) => void'

[vinuthakaranth]

I am getting error - Type '(instance: HTMLElement | null) => void' is not assignable to type '(instance: SyntaxHighlighter | null) => void', when I try to use code as below. Anyone knows what's happening? thanks!

import { CodeComponent } from "react-markdown/src/ast-to-react";
type CodeProps = Parameters[0];

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

[ChristianMurphy]

@vinuthakaranth could you share a runnable example of what you are seeing?
It looks like this is based off https://github.com/remarkjs/react-markdown#use-custom-components-syntax-highlight
and trying that out in a code sandbox with TypeScript, it appears to work https://codesandbox.io/s/determined-ellis-9iqvb

It's possible you have a different highlighter that has TypeScript typings already instead of react-syntax-highlighter.
If so, it may be related to #815 and the {...props} spread not being compatible with the properties of the <SyntaxHighlighter> component.

[vinuthakaranth]

My previous renderer was something like below:

  private readonly CodeBlockRenderer = (props: { language: string; value: string }) => {
    const theme = getTheme();
    const language = getLanguage(props.language);
    return (
      <SyntaxHighlighter language={language} style={theme} customStyle={customStyle}>
        {props.value || ""}
      </SyntaxHighlighter>
    );
  };

Now I tried to convert to something like below after seeing issue #815 :

  const components = {
      image: this.ImageRenderer.bind(this),
      link: this.LinkRenderer.bind(this),
      headingRenderer,
      code: (props: { language: string; value: string }) => {
      const theme = getTheme();
      const language = getLanguage(props.language);
        return (
          <SyntaxHighlighter language={language} style={theme} customStyle={customStyle}>
            {props.value || ""}
          </SyntaxHighlighter>
        );
      }
    };

but now I get below error while passing components
Type '(props: { language: string; value: string; }) => JSX.Element' is not assignable to type 'CodeComponent'.

[ChristianMurphy]

@vinuthakaranth did you get a chance to look at https://codesandbox.io/s/determined-ellis-9iqvb ? It shows a working example
If it persists https://codesandbox.io/s/determined-ellis-9iqvb could be used as a starting point for sharing an example of the issue you are seeing.
With the partial code sample you shared, and without context on what versions of libraries you are using. I can only speculate as to what the cause may be.