fix: suppress Mux Player React hydration warning by decepulis · Pull Request #1116 · muxinc/elements

decepulis · 2025-05-08T19:21:40Z

player-init-time is generated differently on the server than it is on the client... which causes hydration warnings, e.g.,

hydration-error-info.js:63 Warning: Prop `player-init-time` did not match. Server: "1746731940341" Client: "1746731940846"
    at mux-player
    at eval (webpack-internal:///../../packages/mux-player-react/dist/index.mjs:138:74)
    at eval (webpack-internal:///../../packages/mux-player-react/dist/index.mjs:260:71)
    at main
    at MuxPlayerPage (webpack-internal:///./pages/MuxPlayer.tsx:234:11)
    at MyApp (webpack-internal:///./pages/_app.tsx:24:11)
    at PathnameContextProviderAdapter (webpack-internal:///../../node_modules/next/dist/shared/lib/router/adapters.js:81:11)
    at ErrorBoundary (webpack-internal:///../../node_modules/next/dist/client/components/react-dev-overlay/pages/ErrorBoundary.js:41:9)
    at ReactDevOverlay (webpack-internal:///../../node_modules/next/dist/client/components/react-dev-overlay/pages/ReactDevOverlay.js:33:11)
    at Container (webpack-internal:///../../node_modules/next/dist/client/index.js:81:1)
    at AppContainer (webpack-internal:///../../node_modules/next/dist/client/index.js:189:11)
    at Root (webpack-internal:///../../node_modules/next/dist/client/index.js:413:11) 
See more info here: https://nextjs.org/docs/messages/react-hydration-error

I propose adding suppressHydrationWarning on Mux Player to... suppress this hydration warning.

prior art

muxinc/media-chrome#992

drawbacks of this approach

if users are using something like math.random() on another prop (e.g., colors or something?), they won't get a hydration warning

other approaches proposed

when player-init-time gets set internally, we don't have to sprout it. That would prevent the hydration error without having to resort to this escape hatch

vercel · 2025-05-08T19:21:46Z

@decepulis is attempting to deploy a commit to the Mux Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2025-05-08T19:25:14Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
elements-demo-astro	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2025 7:28pm
elements-demo-nextjs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2025 7:28pm
elements-demo-svelte-kit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2025 7:28pm
elements-demo-vanilla	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2025 7:28pm
elements-demo-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2025 7:28pm

decepulis · 2025-05-08T19:41:38Z

On second thought, it's better if we fix this the proper way, by not sprouting player-init-time

snyk-io · 2025-05-20T20:43:48Z

🎉 Snyk checks have passed. No issues have been found so far.

✅ security/snyk check is complete. No issues have been found. (View Details)

✅ license/snyk check is complete. No issues have been found. (View Details)

luwes

LGTM

🤖 I have created a release *beep* *boop* --- <details><summary>@mux/playback-core: 0.29.1</summary> ## [0.29.1](https://github.com/muxinc/elements/compare/@mux/playback-core@0.29.0...@mux/playback-core@0.29.1) (2025-06-12) ### Bug Fixes * **playback-core:** Change default of preferCmcd to 'none' for improved cacheability. Update reference docs to document preferCmcd (et al.). ([#1136](#1136)) ([4409304](4409304)) </details> <details><summary>@mux/mux-player: 3.4.1</summary> ## [3.4.1](https://github.com/muxinc/elements/compare/@mux/mux-player@3.4.0...@mux/mux-player@3.4.1) (2025-06-12) ### Bug Fixes * bring back cast button for drm protected videos ([#1137](#1137)) ([aa3a1ca](aa3a1ca)) * bump the prod-dependencies group across 2 directories with 1 update ([#1121](#1121)) ([85a2276](85a2276)) * bump the prod-dependencies group across 2 directories with 4 updates ([#1138](#1138)) ([0ac6871](0ac6871)) * **playback-core:** Change default of preferCmcd to 'none' for improved cacheability. Update reference docs to document preferCmcd (et al.). ([#1136](#1136)) ([4409304](4409304)) * rendition-menu visual improvements ([#1131](#1131)) ([59a2aaa](59a2aaa)), closes [#1122](#1122) ### Dependencies * The following workspace dependencies were updated * dependencies * @mux/mux-video bumped from 0.25.2 to 0.25.3 * @mux/playback-core bumped from 0.29.0 to 0.29.1 </details> <details><summary>@mux/mux-player-react: 3.4.1</summary> ## [3.4.1](https://github.com/muxinc/elements/compare/@mux/mux-player-react@3.4.0...@mux/mux-player-react@3.4.1) (2025-06-12) ### Bug Fixes * Ensure ref callback cleanup executes on MuxPlayer unmount ([#1132](#1132)) ([1c850b6](1c850b6)) * **playback-core:** Change default of preferCmcd to 'none' for improved cacheability. Update reference docs to document preferCmcd (et al.). ([#1136](#1136)) ([4409304](4409304)) * suppress Mux Player React hydration warning ([#1116](#1116)) ([0235d89](0235d89)) ### Dependencies * The following workspace dependencies were updated * dependencies * @mux/mux-player bumped from 3.4.0 to 3.4.1 * @mux/playback-core bumped from 0.29.0 to 0.29.1 </details> <details><summary>@mux/mux-audio: 0.15.9</summary> ## [0.15.9](https://github.com/muxinc/elements/compare/@mux/mux-audio@0.15.8...@mux/mux-audio@0.15.9) (2025-06-12) ### Bug Fixes * bump the prod-dependencies group across 1 directory with 2 updates ([#1129](#1129)) ([e2ae00b](e2ae00b)) * bump the prod-dependencies group across 2 directories with 4 updates ([#1138](#1138)) ([0ac6871](0ac6871)) ### Dependencies * The following workspace dependencies were updated * dependencies * @mux/playback-core bumped from 0.29.0 to 0.29.1 </details> <details><summary>@mux/mux-audio-react: 0.15.9</summary> ## [0.15.9](https://github.com/muxinc/elements/compare/@mux/mux-audio-react@0.15.8...@mux/mux-audio-react@0.15.9) (2025-06-12) ### Miscellaneous Chores * **@mux/mux-audio-react:** Synchronize audio versions ### Dependencies * The following workspace dependencies were updated * dependencies * @mux/playback-core bumped from 0.29.0 to 0.29.1 </details> <details><summary>@mux/mux-video: 0.25.3</summary> ## [0.25.3](https://github.com/muxinc/elements/compare/@mux/mux-video@0.25.2...@mux/mux-video@0.25.3) (2025-06-12) ### Bug Fixes * bump the prod-dependencies group across 1 directory with 2 updates ([#1129](#1129)) ([e2ae00b](e2ae00b)) * bump the prod-dependencies group across 2 directories with 4 updates ([#1138](#1138)) ([0ac6871](0ac6871)) * remove old cast events from mux-video ([73a85cd](73a85cd)) ### Dependencies * The following workspace dependencies were updated * dependencies * @mux/playback-core bumped from 0.29.0 to 0.29.1 </details> <details><summary>@mux/mux-video-react: 0.25.3</summary> ## [0.25.3](https://github.com/muxinc/elements/compare/@mux/mux-video-react@0.25.2...@mux/mux-video-react@0.25.3) (2025-06-12) ### Miscellaneous Chores * **@mux/mux-video-react:** Synchronize video versions ### Dependencies * The following workspace dependencies were updated * dependencies * @mux/playback-core bumped from 0.29.0 to 0.29.1 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Suppress Mux Player React hydration warning

984fe0d

decepulis requested a review from a team as a code owner May 8, 2025 19:21

decepulis self-assigned this May 8, 2025

vercel bot deployed to Preview – elements-demo-vue May 8, 2025 19:26 View deployment

vercel bot deployed to Preview – elements-demo-astro May 8, 2025 19:26 View deployment

vercel bot deployed to Preview – elements-demo-vanilla May 8, 2025 19:27 View deployment

vercel bot deployed to Preview – elements-demo-svelte-kit May 8, 2025 19:27 View deployment

vercel bot deployed to Preview – elements-demo-nextjs May 8, 2025 19:28 View deployment

decepulis closed this May 8, 2025

decepulis mentioned this pull request May 8, 2025

Bug: hydration errors from player-init-time #1117

Closed

1 task

luwes mentioned this pull request May 20, 2025

fix: remove default playerInitTime #1124

Closed

luwes reopened this May 20, 2025

luwes approved these changes May 20, 2025

View reviewed changes

luwes changed the title ~~Suppress Mux Player React hydration warning~~ fix: suppress Mux Player React hydration warning May 20, 2025

luwes merged commit 0235d89 into muxinc:main May 20, 2025
14 checks passed

github-actions bot mentioned this pull request May 20, 2025

chore: release main #1125

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: suppress Mux Player React hydration warning#1116

fix: suppress Mux Player React hydration warning#1116
luwes merged 1 commit intomuxinc:mainfrom
decepulis:dc/suppressHydrationWarning

decepulis commented May 8, 2025 •

edited by luwes

Loading

Uh oh!

vercel bot commented May 8, 2025

Uh oh!

vercel bot commented May 8, 2025 •

edited

Loading

Uh oh!

decepulis commented May 8, 2025

Uh oh!

snyk-io bot commented May 20, 2025 •

edited

Loading

Uh oh!

luwes left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

decepulis commented May 8, 2025 • edited by luwes Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

prior art

drawbacks of this approach

other approaches proposed

Uh oh!

vercel bot commented May 8, 2025

Uh oh!

vercel bot commented May 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

decepulis commented May 8, 2025

Uh oh!

snyk-io bot commented May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎉 Snyk checks have passed. No issues have been found so far.

Uh oh!

luwes left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

decepulis commented May 8, 2025 •

edited by luwes

Loading

vercel bot commented May 8, 2025 •

edited

Loading

snyk-io bot commented May 20, 2025 •

edited

Loading