SyntaxError：Next.js 中出现意外的标记“导出”

Question

当我渲染下面的代码时，我收到此错误：

语法错误：意外的标记“导出”

（项目路径）/node_modules/react-syntax-highlighter/dist/esm/styles/prism/index.js

它最初按预期工作，直到我刷新页面。

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";

const codeString = '(num) => num + 1';

const Code = () => {
  return (
    <div>
      <SyntaxHighlighter language="javascript" style={oneLight}>
        {codeString}
      </SyntaxHighlighter>
    </div>
  );
};

export default Code;

Answer 1

Unexpected token 'export'Next.js使用时的解决方案react-syntax-highlighter

使用此导入路径：

react-syntax-highlighter/dist/cjs/...

代替：

react-syntax-highlighter/dist/esm/...