无法在Next.js 13和Sanity v3中使用React Syntax Highlight

Question

你好，我有一个问题，我的项目使用Sanity v3和React语法荧光笔。当我使用Refactor库在浏览器中显示我的代码时，它可以通过查看Sanity

中的代码输入教程来工作。但是当我想使用React语法高亮灯并选择Prism作为主题时，我无法显示它，因为错误看起来像这样:

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

我使用Next.Js 13 &这是我的代码:

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目录。

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

Answer 2

错误引发，因为它应该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 3

你也可以尝试从'cjs'导入，而不是'esm'，因为代码必须从服务器端可执行(如上所述)

因此:

import { dark } from "react-syntax-highlighter/dist/esm/styles/prism"