Невозможно использовать React Syntax Highlighter в Next.js 13 и Sanity v3

Question

Здравствуйте, у меня проблема с моим проектом, использующим Sanity v3 и React SyntaxHighlighter. когда я используюRefactorбиблиотека для отображения моего кода в браузере, она работает, просмотрев учебник в Code Input by Sanity

Но когда я хочу использовать React SyntaxHighlighter и выбираю 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 SyntaxHighlighter в свой проект?

Answer 1

Вы также можете попробовать импортировать из «cjs», а не из «esm», поскольку код должен быть исполняемым со стороны сервера (как упоминалось выше).

Поэтому: