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

Question

您好，我的项目在使用 Sanity v3 和 React Syntax Highlighter 时遇到问题。当我使用库在浏览器中显示我的代码时，它可以通过查看Sanity 的代码输入Refactor中的教程来工作

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

Answer 1

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

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