Skip to content

[bug] React hydration mismatch error #418 on project page #102

Description

@realproject7

Problem

Browser console shows React error #418 (hydration mismatch) when loading the project dashboard via SPA fallback. The server-rendered HTML from the static export template doesn't match what the client renders after hydration with the real project ID.

Error

Uncaught Error: Minified React error #418; visit
https://react.dev/errors/418?args[]=HTML&args[]= for the full message

Root cause

The static export pre-renders /project/_.html with placeholder data. When served via SPA fallback for /project/quadwork, the client hydrates with different content (real project ID via usePathname()), causing a mismatch.

Possible fixes

  1. Suppress hydration warnings for the project page (use suppressHydrationWarning)
  2. Don't pre-render the project page at all — make it fully client-side rendered
  3. Use dynamic(() => import(...), { ssr: false }) for ProjectDashboard

Acceptance Criteria

  • No React hydration errors in console
  • Project page still loads correctly

Branch

task/102-hydration-fix

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions