Open2023/02/19にコメント追加5

React-Calendarを使ったらHydration failed エラー出た

still_chair_2022/09/18

Next.js で React-Calendar を使ったら、エラーメッセージが表示された。

エラーは以下の3つ。
Error: Text content does not match server-rendered HTML.
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Hydration のエラーっぽい

コードはこんな感じ

import Calendar from "react-calendar";

const CalendarWrapper = () => {
  return (
    <div>
      <Calendar />
    </div>
  );
};

export default CalendarWrapper;

still_chair_2022/09/18に更新

Hydration Failed (2つ目のエラー) で調べて以下の記事を見つけたが、「Expected server HTML to contain a matching <div> in <p>」のようなメッセージは出てないので、HTMLタグの配置間違いではなさそう。

React18+Next.jsにおけるHydration failedについて

still_chair_2022/09/18

Text content does not match server-rendered HTML.
こっちのエラーメッセージで調べて、以下の記事を見つけた。

ReactでDateに関してWarning: XXX did not match.になるとき

サーバサイド(SSR/SSG)とクライアントサイド(日本時間のブラウザによるレンダリング)でタイムゾーンが異なることにより表示される日付が変わってしまうため、レンダリング結果に差が出てしまいHydrationエラーになるっぽい。

still_chair_2022/09/18

React-Calendarはデフォルトで特にlocaleを指定しなくても日本の表示として表示される。
おそらく表示が日本の表示になるのは、日本時間のブラウザによるもの。

つまり、localeを明示的に入れれば解決する。

import Calendar from "react-calendar";

const CalendarWrapper = () => {
  return (
    <div>
      <Calendar 
          locale="ja-JP"
       />
    </div>
  );
};

export default CalendarWrapper;

gonta 2023/02/19

こちらを参考に対処できました！ありがとうございます！