Next.js 14 で、CodeMirror 6 のスタイルが反映されない問題

Next.js 14 で、CodeMirror 6 のスタイルが反映されない問題

Next.js 14 で CodeMirror 6 のスタイルが正しく反映されない問題が発生することがあります。この問題の解決方法について説明します。

エラーメッセージ

以下のようなエラーメッセージが表示された場合、下記のコマンドで解決することができます。

解決方法

以下のコマンドを順番に実行することで解決できます。

これにより、依存関係の競合が解決され、CodeMirror 6 のスタイルが正しく反映されるようになります。

原因

依存関係の競合が原因であるため、npm dedupe コマンドを使って重複するパッケージを整理し、その後に node_modules ディレクトリと package-lock.json ファイルを削除してから再インストールすることで問題が解決します。