SSR error -- extra attributes from the server: tabindex

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.

[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