Cannot using React Syntax Highlighter in Next.js 13 & Sanity v3

Question

Hello i have a problem for my project using Sanity v3 and React Syntax Highlighter. When i use Refactor library for showing my code in the browser it works by looking a tutorial in Code Input by Sanity

But when i want to using React Syntax Highlighter and choosing Prism as theme i cannot show it because the error is look like this :

Server Error TypeError: Super expression must either be null or a function

I am using Next.Js 13 & Typescript and this is my code :

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";

types: {
    image: SampleImageComponent,
    code: (props: any) => {
        return (
            <SyntaxHighlighter language={props.value.language} style={dark}>
                {props.value.code}
            </SyntaxHighlighter>
        );
    },
},

How can i add React Syntax Highlighter in my project?

Answer 1

The errors raise because it should React.FC types like this :

interface CodeInputProps {
    code: string;
    language: string;
}

const CodeInput: React.FC<CodeInputProps> = (props) => {
    const { code, language } = props;
    return (
        <SyntaxHighlighter language={language} style={tomorrow}>
            {code}
        </SyntaxHighlighter>
    );
};

Answer 2

I found a separate solution to this issue. For me it was because the syntax highlighter runs client side and Next13 out of the box uses server components if you're using the new app directory.

Try adding 'use client' at the top of the file that is using SyntaxHighlighter.

Answer 3

You can also try importing from 'cjs' as oppose to 'esm' as the code has to be executable from the server side (as mentioned above)

Therefore:

import { dark } from "react-syntax-highlighter/dist/esm/styles/prism"