無法在 Next.js 13 & Sanity v3 中使用 React Syntax Highlighter

Question

您好，我的項目使用 Sanity v3 和 React Syntax Highlighter 時遇到問題。 當我使用Refactor庫在瀏覽器中顯示我的代碼時，它通過查看Sanity 的代碼輸入中的教程來工作

但是當我想使用 React Syntax Highlighter 並選擇 Prism 作為主題時，我無法顯示它，因為錯誤如下所示：

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

我正在使用 Next.Js 13 & Typescript，這是我的代碼：

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

如何在我的項目中添加 React Syntax Highlighter？

Answer 1

出現錯誤是因為它應該像這樣 React.FC 類型：

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

我找到了這個問題的單獨解決方案。 對我來說，這是因為語法高亮顯示在客戶端運行，如果您使用新的app目錄，開箱即用的 Next13 使用服務器組件。

嘗試在使用SyntaxHighlighter的文件頂部添加'use client' 。