server-site and client-site content dismatch

[stellanw]

Hello,
I am currently noticed an bug on our calendar page.

I have committed and pushed my current status. It is accessible at this link. The branch is called "calendar-page".

Description of the error:

The error message is displayed in the browser immediately upon going to the "/calendar" page.

Right when starting the Development Server.
What is expected, what happens?
I expect my component to render without an error message. If I dismiss the error message, it still appears, but when I restart the Development Server or refresh the browser, the error message comes up again.
What are the error messages?

ERROR

Displayed in Browser:
Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.

Warning: Text content did not match. Server: "March 2024" Client: "März 2024"

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Displayed in Console:
Warning: Text content did not match. Server: "March 2024" Client: "März 2024"
at span
at button
at div
at Navigation (webpack-internal:///./node_modules/react-calendar/dist/esm/Calendar/Navigation.js:16:30)
at div
at Calendar (webpack-internal:///./node_modules/react-calendar/dist/esm/Calendar.js:151:38)
at CalendarPage
at SWRConfig (webpack-internal:///./node_modules/swr/dist/_internal/index.mjs:571:13)
at App (webpack-internal:///./pages/_app.js:14:11)
at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:74:11)
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:306:63)
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:858:919)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:92:1)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:196:11)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:374:11)

Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>. 

Uncaught Error: Text content does not match server-rendered HTML.
at checkForUnmatchedText (react-dom.development.js:9647:11)
at diffHydratedProperties (react-dom.development.js:10310:13)
at hydrateInstance (react-dom.development.js:11306:10)
at prepareToHydrateHostInstance (react-dom.development.js:12564:23)
at completeWork (react-dom.development.js:22176:17)
at completeUnitOfWork (react-dom.development.js:26591:16)
at performUnitOfWork (react-dom.development.js:26563:5)
at workLoopSync (react-dom.development.js:26461:5)
at renderRootSync (react-dom.development.js:26429:7)
at performConcurrentWorkOnRoot (react-dom.development.js:25733:74)
at workLoop (scheduler.development.js:266:34)
at flushWork (scheduler.development.js:239:14)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21)

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
at throwOnHydrationMismatch (react-dom.development.js:12507:9)
at tryToClaimNextHydratableInstance (react-dom.development.js:12520:7)
at updateHostComponent (react-dom.development.js:19897:5)
at beginWork (react-dom.development.js:21613:14)
at beginWork$1 (react-dom.development.js:27421:14)
at performUnitOfWork (react-dom.development.js:26552:12)
at workLoopSync (react-dom.development.js:26461:5)
at renderRootSync (react-dom.development.js:26429:7)
at performConcurrentWorkOnRoot (react-dom.development.js:25733:74)
at workLoop (scheduler.development.js:266:34)
at flushWork (scheduler.development.js:239:14)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21)

Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
at updateHostRoot (react-dom.development.js:19844:57)
at beginWork (react-dom.development.js:21610:14)
at beginWork$1 (react-dom.development.js:27421:14)
at performUnitOfWork (react-dom.development.js:26552:12)
at workLoopSync (react-dom.development.js:26461:5)
at renderRootSync (react-dom.development.js:26429:7)
at recoverFromConcurrentError (react-dom.development.js:25845:20)
at performConcurrentWorkOnRoot (react-dom.development.js:25745:22)
at workLoop (scheduler.development.js:266:34)
at flushWork (scheduler.development.js:239:14)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21)

After research I think it is a mismatch between problem between server-rendered and client-rendered content based on internationalization problem.

Maybe someone knows how to fix it?

Thank you for your help!

[NikRoe]

Hi there,

one possible solution is to render the calendar component only on the client and change the import to this:

import dynamic from "next/dynamic";

const Calendar = dynamic(
  () => import("react-calendar"),
  { ssr: false } // This will only import `react-calendar` on the client-side
);

Please see if this already does the trick and let me know otherwise.

Best regards ✌️

[d-hung-nguyen]

Vielen Dank Niklas, es hat funktioniert!