Web開発ブログ

Next.jsでビルドした時のみエラー「Application error: a client-side exception has occurred」が発生する問題

作成

2023/10/11

npm run devで開発用のローカルサーバーを立てた時には正常に動作するのに、npm run buidで作成すると次のようなエラーが発生した。


Application error: a client-side exception has occurred (see the browser console for more information).

ブラウザのコンソールに情報があるとのことなので見てみたが、圧縮されているので原因の特定が難しい。


TypeError: Cannot read properties of undefined (reading 'x')
    at 1459-5286b97ae55e21b0.js:16:10198
    ...

原因を特定する

まずは、ビルドしてもソースマップが表示されるようにnext.config.jsでproductionBrowserSourceMapsを有効にする。

next.config.js


const nextConfig = {
  productionBrowserSourceMaps: true,
  ...
};

これで再びビルドしコンソールを確認してみると詳細がわかるようになる。


app-index.js:31 TypeError: Cannot read properties of undefined (reading 'x')
    at chartjs-plugin-annotation.esm.js:1531:18
    ...

今回はChartjsのプラグインであるchartjs-plugin-annotationが原因だった。

代わりのライブラリを使うか不要であれば削除すればエラーはでなくなる。

解決後はproductionBrowserSourceMaps: trueも削除しておく。

原因が特定できたものの解決するのが難しかったり、削除するわけにもいかない場合はswcMinifyを無効にすると解決できるかもしれない。

デフォルトではswcMinifyが有効になっているのでnext.config.jsで変更する。

next.config.js


const nextConfig = {
  swcMinify: false,
  ...
};

ただしswcMinifyを無効にするとビルド時間も生成されたファイルサイズも大きくなってしまう。

自分の環境では20%ほど増加していた。

なのでこの方法は最後の手段にしたい。