Skip to content

Commit 0235d89

Browse files
authored
fix: suppress Mux Player React hydration warning (#1116)
closes #1124 fix #1117 `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
1 parent a070dc2 commit 0235d89

File tree

1 file changed

+8
-1
lines changed

1 file changed

+8
-1
lines changed

packages/mux-player-react/src/index.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,14 @@ export type MuxPlayerProps = {
137137
Partial<VideoApiAttributes>;
138138

139139
const MuxPlayerInternal = React.forwardRef<MuxPlayerRefAttributes, MuxPlayerProps>(({ children, ...props }, ref) => {
140-
return React.createElement('mux-player', toNativeProps({ ...props, ref }), children);
140+
return React.createElement(
141+
'mux-player',
142+
{
143+
suppressHydrationWarning: true, // prevent issues with SSR / player-init-time
144+
...toNativeProps({ ...props, ref }),
145+
},
146+
children
147+
);
141148
});
142149

143150
const useEventCallbackEffect = <K extends keyof MuxPlayerElementEventMap>(

0 commit comments

Comments
 (0)