Skip to content

🐛 Bug: Hydration warning: img alt text mismatch between server and client #2003

@AdityaTile04

Description

@AdityaTile04

Describe the bug

When running the JSON Schema website locally, a React hydration warning is
logged in the browser console on every page refresh.

The warning indicates a mismatch between the server-rendered HTML and the
client-side React render for an img element’s alt attribute. The server
and client output differ due to whitespace normalization, which causes React
to report a hydration mismatch.

Steps To Reproduce

  1. Clone the json-schema-org/website repository
  2. Install dependencies
  3. Start the local development server
  4. Open the homepage in the browser
  5. Refresh the page
  6. Observe the hydration warning in the browser console

Expected Behavior

The homepage should hydrate cleanly without any React warnings, and the
server-rendered HTML should exactly match the client-side render.

Screenshots

Screenshot of the browser console showing the React hydration warning is
attached for reference.

Image

Device Information [optional]

- OS: Windows 11
- Browser: Google Chrome
- Version: 143.0.7499.41 (Official Build) (64-bit)

Are you working on this issue?

Yes

Do you think this work might require an [Architectural Decision Record (ADR)]? (significant or noteworthy)

No

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: TriageThis is the initial status for an issue that requires triage.dependenciesPull requests that update a dependency file🐛 BugIndicates that the issue is a bug or defect.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions