json-schema-org / json-schema-org/website

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

Open
#2,003 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

🐛 Bug dependencies Status: Triage
Dominant language
HTML
Stars
169
Forks
484
Avg merge
2d 2h
Merged PRs (30d)
6

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the warning locally on the homepage and inspect the server- and client-rendered img alt attributes. Trace the whitespace normalization that makes their output differ. Done means the homepage refreshes without a React hydration warning and the server-rendered HTML exactly matches the client render.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.