children in Syntax Highlighter showing as object Object

[kartikm7]

Hey guys I have been working on an Vite + Electron project, and trying to implement code block support in the chat section and I picked up the code from the docs and the String(children) returns object Object and I don't know what to do... Can some one help me out?
I suspect it could be something with my dev environment, but I am not too sure.
Also, just extra context I am working on an llm opensource chat project so the response comes from the llm in the markdown format...

Text on frontend

,[object Object],
,[object Object], ,[object Object],(,[object Object],) {
    ,[object Object], (n === ,[object Object],) ,[object Object], ,[object Object],;
    ,[object Object], {
        ,[object Object], result = n * ,[object Object],(n - ,[object Object],);
        ,[object Object], result;
    }
}

,[object Object],.,[object Object],(,[object Object],(,[object Object],));

The image of the console.log of the value

Actual code implementation

            <Card key={index}>
              <Markdown
                className="markdown"
                remarkPlugins={[[remarkGfm, { singleTilde: false }]]}
                rehypePlugins={[rehypeHighlight]}
                components={{
                  a: (props) => {
                    return (
                      <a
                        href={props.href}
                        className="bg-foreground bg-opacity-20 opacity-70 px-1 hover:opacity-100 hover:underline transition-all"
                        target="_blank"
                        rel="noreferrer"
                      >
                        {props.children?.toString()}
                      </a>
                    )
                  },
                  code(props) {
                    const myRef = useRef<SyntaxHighlighter>(null);
                    const {children, className, node, ...rest} = props
                    const match = /language-(\w+)/.exec(className || '')
                    return match ? (
                      <SyntaxHighlighter
                        {...rest}
                        PreTag="div"
                        language={match[1]}
                        style={dark}
                        ref={myRef}
                      >{String(children).replace(/\n$/, '')}</SyntaxHighlighter>
                    ) : (
                      <code {...rest} className={className}>
                        {children}
                      </code>
                    )
                  }
                }}
              >
                {String(val.content)}
              </Markdown>
            </Card>            ```

[ChristianMurphy]

Welcome @kartikm7! 👋
Sorry you ran into some confusion.

Could you share a runnable example of what you're seeing, ideally in a sandbox?
I tested the example from the readme it works https://stackblitz.com/edit/github-rvztvg-r6zv1s?file=src%2Fapp.tsx

I see a number of modifications in your code like tailwind and most custom elements which could be related.
I could also be what content you are passing in, have you checked what val.content is?

[kartikm7]

Hey @ChristianMurphy thank you so much for the prompt reply!
I am not sure how I can run the code in a sandbox since it is an electron project... But if it's still not understandable why I will try my best to replicate it on a sandbox platform!
This is what I seen on the front end:

So val.content is the value that comes from the llm here's a log of what it does:

I am using custom components in react markdown just for links and codeblocks(although the problem I face is here).
I did test the native html code tag and that parses it correctly.. My use case for it is actually is to make a codeblock component with a copy to clipboard functionality like that of gpt and others....
I don't know if this helps, but the children is of this type natively,

const children: React.ReactNode
I think that's why we do the String() operation, but it returns object Object for some reason

Also thought I'd share my devDependencies: Could it be the vite version?

Thanks in advance man, thank you for giving your time to my query!

[kartikm7]

Just found a solution!
Had to extract just the string from children:ReactNode , found a lightweight npm package for that :

import reactNodeToString from 'react-node-to-string'

this got it working for me!

              <Markdown
                className="markdown"
                rehypePlugins={[rehypeHighlight]}
                remarkPlugins={[remarkGfm]}
                components={{
                  a: (props) => {
                    return (
                      <a
                        href={props.href}
                        className="bg-foreground bg-opacity-20 opacity-70 px-1 hover:opacity-100 hover:underline transition-all"
                        target="_blank"
                        rel="noreferrer"
                      >
                        {props.children}
                      </a>
                    )
                  },
                  code(props) {
                    const myRef = useRef<SyntaxHighlighter>(null)
                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
                    const { children, className, node, ...rest } = props
                    console.log(children)

                    const match = /language-(\w+)/.exec(className || '')
                    return match ? (
                      <Code language={match[1]} ref={myRef}>
                        {reactNodeToString(children).trim().replace(/\n$/, '')}
                      </Code>
                    ) : (
                      <code {...rest} className={className}>
                        {children}
                      </code>
                    )
                  }
                }}
              >
                {val.content}
              </Markdown>
              ```

[ChristianMurphy]

I'm still a bit unclear on what in your environment requires a custom serializer, but I'm glad you found a solution that works for you!

[kartikm7]

Hi @ChristianMurphy ! I actually just figured out why I needed to serialize, this was because I was using both rehype-highlight and react-syntax-highlighter. So this is what I think must be happening, rehype-highlight would pre-process the code block and convert some of the string to React Nodes and when I'd convert the children prop of the code-block to String and drill the prop to my custom Code component(which uses react-syntax-highlighter) that would cause react-syntax-highlighter to get a string with [object Object]. Removing rehype-highlight fixed this issue for me.

Thank you so much for being kind, and trying to help me out here!