Next.JS / React 18 - Hydration Error

Current Behavior

Unless react-player is loaded on the client-side using dynamic/no-ssr or useEffect, React will panic with a hydration error.

Expected Behavior

Use of SSR should not result in a hydration error.

Steps to Reproduce

1. Using Next.JS, import react-player and follow typical implementation instructions.
2. Error

Other Information

There is a great thread on Stack Overflow here (https://stackoverflow.com/questions/71706064/react-18-hydration-failed-because-the-initial-ui-does-not-match-what-was-render) where devs list various solutions to related issues.

Examples:

• react and react-dom may need to be updated.
• Wrapping tags improperly, such as <div> inside <p> will cause the error.
• Lazy modules need to be wrapped in <Suspense>.

Please check again these scenarios in the codebase. Thank you!

[karlhorky]

I agree that ReactPlayer should be SSR-friendly out of the box, @cookpete what do you think?

---

For now, until that happens, another workaround is to lazy-load the player using Next.js dynamic imports, as mentioned by @inderrr in this comment:

import dynamic from 'next/dynamic';

const ReactPlayer = dynamic(() => import('react-player/lazy'), { ssr: false });

[narasaka]

Have you tried this?

It’s basically checking the window.

const Component: React.FC<SomeProps> = ({url}) =>{
  const [hasWindow, setHasWindow] = useState(false);
  useEffect(() => {
    if (typeof window !== "undefined") {
      setHasWindow(true);
    }
  }, []);
  return (
    <>
      {hasWindow && <ReactPlayer url={url} />}
    </>
  )