json-schema-org / json-schema-org/website
🐛 Bug: Hydration warning: img alt text mismatch between server and client
Nobody has claimed this yet.
- 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
- Clone the
json-schema-org/websiterepository - Install dependencies
- Start the local development server
- Open the homepage in the browser
- Refresh the page
- 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.
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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