fix(site): restore react demos for ssr-safe media elements - #1867
Merged
Conversation
The live React demos on the media element reference pages were replaced with source-only tabs as a workaround for #1343. Only dashjs actually breaks SSR: hls.js and mux-embed both import cleanly in Node, so these six pages can use the standard `<Demo>` + `client:idle` pattern again.
dashjs is the one media engine that still breaks SSR: it bundles imsc, which reads `window.getComputedStyle` at module scope, so upstream's MediaPlayerFactory fix in 5.2.0 only covered half the problem (#1343). `client:only` alone is not enough — Astro still emits a static import for the island, so the module is evaluated during prerender and the build fails. Routing the demo through `lazy(() => import(...))` leaves only a dynamic import on the server graph, which never executes. An `aspect-video` wrapper reserves the demo's box so hydration doesn't shift the page.
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📦 Bundle Size Report🎨 @videojs/html — no changesPresets (7)
Media (10)
Players (5)
Skins (30)
UI Components (39)
Sizes are marginal over the root entry point. ⚛️ @videojs/react — no changesPresets (7)
Media (9)
Skins (27)
UI Components (33)
Sizes are marginal over the root entry point. 🧩 @videojs/core — no changesEntries (68)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (11)
📦 @videojs/spf — no changesEntries (4)
ℹ️ How to interpretJS sizes are initial static graph totals (minified + brotli). Lazy dynamic chunks are shown separately when present.
Run |
decepulis
changed the title
sampotts
approved these changes
Jul 24, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Refs #1343
Summary
The React live demos on the seven media element reference pages were replaced with source-only tabs as a workaround for #1343. Only dashjs actually breaks SSR — hls.js and mux-embed both import cleanly in Node — so the six pages that were never affected go back to the standard demo pattern.
dash-videois left as-is.Changes
hlsjs-video,native-hls-video,simple-hls-video,simple-hls-audio-only,mux-video, andmux-audiousing the usual<Demo>+client:idlepattern.dash-videois unchanged and keeps its source-only tabs until dashjs can be loaded lazily in core.Why dash is the only page still blocked
Upstream dash.js#4929 shipped in dashjs 5.2.0 and made
MediaPlayerFactorySSR-safe, but that only covered half the problem. dashjs statically bundlesimsc, whosehtml.jsreadswindow.getComputedStyle(document.documentElement)at module scope (three times, for ruby/text-emphasis feature detection). Soimport * as dashjs from 'dashjs'still throws in Node.imsc@1.1.5is the latest release and there's no open issue for this in either repo.A
client:onlydirective is not a fix either: Astro still emits a static import for the island, so the module is evaluated during prerender and the build fails withwindow is not defined. Working around it in the docs site requires routing the demo throughlazy(() => import(...))so only a dynamic import lands on the server graph — which is more machinery than one demo justifies. The real fix belongs in@videojs/core, lazy-loading dashjs in the host class lifecycle, which is what #1343 tracks.Testing
pnpm -F site exec astro check --minimumSeverity warning— 0 errors, 0 warningspnpm typecheck,pnpm -F site test(512 tests),pnpm check:workspacepnpm -F site build— all 7 React and 7 HTML media reference pages prerenderOne caveat for the reviewer:
pnpm -F site buildstill fails on/withTypeError: Cannot read properties of undefined (reading 'data'). This reproduces on a cleanorigin/main, so it is pre-existing and unrelated to this PR — but CI here will not be green until it is fixed.