今日、Next.jsのWebサイトでチャートが必要になり、チャートで一番人気のありそうなライブラリ『Recharts』をインストールしました。
エラー発生
公式の例のコードを参考に書いたら、以下のエラーが発生しました。
Error: Hydration failed because the initial UI does not match what was rendered on the server.
たまに見るやつです。色々試した結果、コンポーネントの引数の値をそのまま使わずに、useEffectの中で別の変数に代入してそれを使ったら、このエラーは解消されました。
わけのわからないエラー発生
このエラーは検索してもよくわからず、解決できませんでした。簡単な棒グラフを表示させたいだけなのに…。
XAxis: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
react-chartjs-2に乗り換えて3分で解決
Rechartsのエラーと数時間格闘した後、ギブアップして2番目に人気のありそうな『react-chartjs-2』を試してみました。インストールしてから3分で、自分が表示させたい棒グラフを表示させることができました。上記の “Hydration failed” のエラーも出ませんでした。最初からこっちを選べば良かったんや…。ツールチップの表示もこっちの方が良い感じ。