Commit 0235d89
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 hatch1 parent a070dc2 commit 0235d89
1 file changed
+8
-1
lines changed| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
137 | 137 | | |
138 | 138 | | |
139 | 139 | | |
140 | | - | |
| 140 | + | |
| 141 | + | |
| 142 | + | |
| 143 | + | |
| 144 | + | |
| 145 | + | |
| 146 | + | |
| 147 | + | |
141 | 148 | | |
142 | 149 | | |
143 | 150 | | |
| |||
0 commit comments