无法在 Next.js 13 和 Sanity v3 中使用 React 语法荧光笔

您好，我的项目在使用 Sanity v3 和 React Syntax Highlighter 时遇到问题。当我使用Refactor用于在浏览器中显示我的代码的库，它可以通过查看教程来工作理智输入代码 https://www.sanity.io/plugins/code-input

但是当我想使用 React 语法荧光笔并选择 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 语法荧光笔？

我找到了这个问题的单独解决方案。对我来说，这是因为语法荧光笔在客户端运行，并且如果您使用新的，Next13 开箱即用地使用服务器组件app目录。

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