Skip to content

Compare page OG image renders empty state on production #2431

@Adebesin-Cell

Description

@Adebesin-Cell

The OG image for the compare page always renders the empty state on production, even when packages are provided via query params.

URL: https://npmx.dev/compare?packages=zustand,redux&view=charts

Expected: OG image shows package comparison with download bars (zustand vs redux)
Actual: OG image shows generic "Compare npm packages side-by-side" empty state

Evidence

  • Works correctly on local dev server (localhost:3001)
  • On Vercel production, the nuxt-og-image-options script tag in the page HTML contains the correct serialized props (packages: ["zustand", "redux"])
  • But the rendered OG image (both PNG and HTML endpoints) shows the empty state; packages never reach the component
  • Even cache-busted fresh renders (x-vercel-cache: MISS) produce the same empty image
  • The etag is identical across all URL variations (with/without _query, with/without packages)

Reproduction

# Works locally (dev):
curl http://localhost:3001/__og-image__/image/compare/og.png?packages=zustand,redux -o local.png

# Broken on production:
curl 'https://npmx.dev/__og-image__/image/compare/og.html?packages=zustand,redux' | grep -i 'zustand'
# Returns nothing — empty state

Introduced in

PR #2277 (feat: add OG image for compare pages) — merged Apr 6

Metadata

Metadata

Assignees

Labels

p1Priority 1 bug (high)

Type

Projects

Status

Released

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions