CODEWITHSUNDEEP
reactjstypescriptnext.jssanityreact-syntax-highlighter
M Muqiit Faturrahman
M Muqiit Faturrahman

Reputation: 129

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

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?

Upvotes: 4

Views: 3467

Answers (3)

alltrust
alltrust

Reputation: 81

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"

Upvotes: 1

Robin Lloyd
Robin Lloyd

Reputation: 91

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.

Upvotes: 8

M Muqiit Faturrahman
M Muqiit Faturrahman

Reputation: 129

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

Upvotes: 0

Related Questions