无法在 Next.js 13 和 Sanity v3 中使用 React Syntax Highlighter答案

【问题标题】：Cannot using React Syntax Highlighter in Next.js 13 & Sanity v3无法在 Next.js 13 和 Sanity v3 中使用 React Syntax Highlighter
【发布时间】：2023-02-04 06:41:16
【问题描述】：

您好，我的项目使用 Sanity v3 和 React Syntax Highlighter 时遇到问题。当我使用 Refactor 库在浏览器中显示我的代码时，它可以通过查看 Code Input by 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？

【问题讨论】：

给定的代码示例不会引发任何类型错误：tsplay.dev/mbKMEW
是的，我不明白，因为我想在 <PortableText> 组件中显示。所以我必须创建 Sanity 允许显示它的每一种类型，无论我喜欢什么。如果我使用来自 github.com/rexxars/react-refractor 的 <Refactor> 组件，它可以正常工作。

标签： reactjs typescript next.js sanity react-syntax-highlighter

【解决方案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>
    );
};

【讨论】：

【解决方案2】：

我找到了解决此问题的单独方法。对我来说，这是因为语法突出显示在客户端运行，如果您使用新的 app 目录，开箱即用的 Next13 使用服务器组件。

尝试在使用 SyntaxHighlighter 的文件顶部添加 'use client'。

【讨论】：