Hydration failed & prerendering error: document is not defined

Help
,
1

Current versus Expected Behavior

Current behavior:

  1. In development, I encounter this error:

    Hydration failed because the server rendered HTML didn't match the client.

  2. In production, after deploying to Vercel, I get this prerendering error:

    Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

    ReferenceError: document is not defined

Expected behavior:

The application should render correctly both in development and production without hydration errors or prerendering issues.

Code, Configuration, and Steps to Reproduce

  1. Repository:

    GitHub Repository Link

  2. Steps to reproduce:

    • Run the project locally in development mode using npm run dev.

    • Open the main register page to see the hydration error.

    • Deploy the project to Vercel and observe the prerendering issue in production.

Project Information

  • Framework: Next.js

  • Environment:

    • Local: Node.js version v22.12.0, OS MacOS 10.15

    • Production: Deployed on Vercel

  • Vercel Configuration:

    • Target: Production

    • Build Command: next build

    • Output Directory: .next

Additional Notes

I suspect the hydration error is caused by the use of document or window in server-side code (SSR). I’m unsure how to resolve this properly or prevent the prerendering issue in production.

2

The domain troubleshooting guide can help with most custom domain configuration issues. You might be able to use that guide to solve it before a human is available to help you. Then you can come back here and share the answer for bonus points.

You can also use v0 to narrow down the possibilities.

3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.