Next.jsでreact-syntax-highlighterを使ったときのUnexpected token ‘export’エラーの解決策

この記事は公開から1年以上経過しています。

React(Next.js)でMarkdownのコードブロックシンタックスハイライティングコードを実装したところエラーが発生したため、その対応についての備忘録。

問題

Next.js 13 ＋ TypeScriptでreact-markdownとreact-syntax-highligterを使用してMarkdownのコードブロックのシンタックスハイライティングを行うと

Server Error
SyntaxError: Unexpected token ‘export’

This error happened while generating the page. Any console logs will be displayed in the terminal window.

のようなエラーが発生する。

原因

ES moduleのスタイル定義(esm)を指定している。

対応

CommonJSのスタイル定義(cjs)を指定する。

例:

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

↓

import {dark} from 'react-syntax-highlighter/dist/cjs/styles/prism'

以上です。

参考ウェブサイトなど

• GitHub
  Use custom components (syntax highlight)