SSR error -- extra attributes from the server: tabindex

[ShaunDychko]

When developing with Gatsby using the DEV_SSR flag, the following warning shows in the browser console:

react_devtools_backend.js:4026 Warning: Extra attributes from the server: tabindex
    at video
    at media-controller
    at eval (webpack-internal:///./node_modules/media-chrome/dist/react/index.js:78:74)

I think this sort of error occurs when there's a mismatch between what is server-side rendered vs. what is rendered in the browser after React hydration. If there's a need for a basic github repo with Gatsby demonstrating the issue just let me know, since this isn't reproducible in codepen.

This is with media-chrome@0.15.1.

[luwes]

thanks for the feedback and reporting. it's indeed like you say related to that some Media Chrome elements get new attributes when they are connected to the DOM which are not there on the server.

it's nothing to worry about.

---

the error in your post can easily be fixed by setting the tabIndex={-1} on the video element.
see https://github.com/muxinc/media-chrome/blob/main/src/js/media-controller.js#L569-L571

however other elements will also also be affected.

[ShaunDychko]

Thanks you @luwes for the workaround of adding tabindex={-1} to the video element. It seems like there's a can of worms here though since after adding that attribute there is a new error:

Warning: Extra attributes from the server: aria-label,tabindex,role,media-paused
    at media-play-button
    at eval (webpack-internal:///./node_modules/media-chrome/dist/react/index.js:162:74)
    at media-control-bar
    at eval (webpack-internal:///./node_modules/media-chrome/dist/react/index.js:92:74)
    at media-controller
    at eval (webpack-internal:///./node_modules/media-chrome/dist/react/index.js:78:74)

I tried the same workaround and added those attributes to the <MediaPlayButton />

          <MediaPlayButton
            aria-label="play"
            tabindex={0}
            role="button"
            media-paused
          />

which then resulted in yet another new error

Warning: Extra attributes from the server: aria-label,tabindex,role,media-volume-level
    at media-mute-button
    at eval (webpack-internal:///./node_modules/media-chrome/dist/react/index.js:148:74)
    at media-control-bar
    at eval (webpack-internal:///./node_modules/media-chrome/dist/react/index.js:92:74)
    at media-controller
    at eval (webpack-internal:///./node_modules/media-chrome/dist/react/index.js:78:74)

From what I understand, this kind of error will cause React to re-render the page, which is fairly consequential. I'm using (RTK Query)[https://redux-toolkit.js.org/rtk-query/overview], which caches data from the server, but with a re-render the cache will be wiped, the server will be queried again, and dynamic UI elements on the page will flash between states while they wait for server data.

[luwes]

yes this is expected at the moment. are you sure it will cause a re-render?

I don't think it does. if React is forced to do a re-render from a mismatch it logs another warning saying it.

we use SSR'd React components on the landing page as well https://www.media-chrome.org/
https://github.com/muxinc/media-chrome/blob/main/docs/src/pages/landing/components/player-panel.tsx

we have the warnings in dev but I don't think it's a major concern if no re-render is triggered

[ShaunDychko]

I've created a repo to reproduce the issue: https://github.com/ShaunDychko/demo-mediachrome-ssr-error

To reproduce

1. Clone repo
2. npm run develop
3. visit http://localhost:8000
4. Inspect the browser console.

While the error shows in the browser console, I was not able to demonstrate that React has to re-render.

[luwes]

thanks for providing an example to reproduce.

appears there is also a special property suppressHydrationWarning that can be set to true to hide the warnings
https://reactjs.org/docs/dom-elements.html#suppresshydrationwarning

[heff]

@luwes What do we need to do to close this one? Has it been partially solved by the move to properties? Do we need to document this somewhere?

[luwes]

I'll move it to a discussion. there's nothing for us to do but make users aware this is expected behavior.

nope, the tabIndex property is reflected to the attribute.

yes maybe in the docs in https://www.media-chrome.org/docs/en/react