Skip to content

fix(BUY-63740): Fix React hydration errors on SEO landing pages#237

Open
BuyWhere wants to merge 1 commit into
mainfrom
BUY-63740-hydrate-fix
Open

fix(BUY-63740): Fix React hydration errors on SEO landing pages#237
BuyWhere wants to merge 1 commit into
mainfrom
BUY-63740-hydrate-fix

Conversation

@BuyWhere

Copy link
Copy Markdown
Owner

Summary

Fixes React hydration errors (minified errors #418/#422) on SEO landing pages in production.

Root Cause

Two distinct issues:

  1. Nested interactive controls in ProductGridCard — <a> inside Next.js <Link> violates React's rule against nested interactive elements
  2. Date render-time mismatch in SeoLandingPage — new Date().toLocaleDateString() produced different values on server vs. client

Changes

ProductGridCard.tsx

  • Replaced inner <a href target=_blank> with <span role=button tabIndex=0> + click/keyboard handlers using window.open()
  • Maintains same UX: opens merchant link in new tab with noopener,noreferrer

SeoLandingPage.tsx

  • Replaced new Date().toLocaleDateString() fallback with stable string "Live prices updated regularly"
  • Avoids hydration mismatch when no product updatedAt timestamp is available

Verification

VidMee renders against production URLs confirm:

  • best-robot-vacuums-2026: No React errors (1 network failure is external image CDN)
  • air-purifier-singapore: Zero console errors, zero network failures (except expected RSC prefetch)

Fixes BUY-63740

- Replace nested <a> inside Next.js <Link> with <span role=button> + handlers
- Use stable fallback label instead of new Date().toLocaleDateString()
- Fixes Minified React error #418/#422 on production SEO pages
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant