What's the type of props of the methods in 'components' object in react-markdown?

Question

Im' trying to use 'react-markdown' in NextJs 13 with typescript. the problem is that typescript keeps complaining about the props of 'code' method, and I googled to find this solution of importing 'CodeProps'. tried using some custom type or simply give 'any', but neither worked.

Is CodeProps no longer exist with some updates? or is this happenin because of the update of NextJs?

'use client';
import ReactMarkdown, { CodeProps } from 'react-markdown';
// error msg: can't find the module 'react-markdown/lib/ast-to-react'
import { CodeProps } from 'react-markdown/lib/ast-to-react';
import remarkGfm from 'remark-gfm';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
const Markdown = ({ content }: { content: string }) => {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm]}
      components={{
        code({ node, inline, className, children, ...props }: CodeProps) {
          const match = /language-(\w+)/.exec(className || '');

          return !inline && match ? (
            <SyntaxHighlighter
              style={oneDark}
              PreTag='div'
              language={match[1]}
              {...props}>
              {String(children).replace(/\n$/, '')}
            </SyntaxHighlighter>
          ) : (
            <code className={className ? className : ''} {...props}>
              {children}
            </code>
          );
        },
      }}>
      {content}
    </ReactMarkdown>
  );
};

export default Markdown;

Answer 1

Probably the easiest way to mitigate this problem would be creating your own interface.

interface CodeProps {
    node?: any,
    inline?: any,
    className?: any,
    children?: any,
}