TylerAHolden / react-schedule-meeting

https://react-schedule-meeting.netlify.app/
MIT License
54 stars 16 forks source link

Next.js hydration errors #73

Closed kartomek closed 5 months ago

kartomek commented 7 months ago

The locale prop has not been passed to react-calendar, causing hydration errors when using Next.js

TylerAHolden commented 7 months ago

The locale prop is actually the Locale type for the date-fns library. Although there is a locale prop for react-calendar, it's not exposed. If you want to pass in a locale prop for the react-calendar we would need to expose a different locale prop type which can be done if that's really what you need but I'm curious what you are seeing to believe this is causing hydration errors? I used to have this component on a nextJS 12 site without issue - are you seeing issues on the app router project type?

dr-aiuta commented 4 months ago

My project used version 0.3.3 with React 16. After upgrading to React 18 and the last version, I'm getting the same errors.

  1. Unhandled Runtime Error Error: Text content does not match server-rendered HTML.
  2. Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server.
  3. Unhandled Runtime Error Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.