Trying to use react-player throws a Hydration error

Question

Hi how are you? I'm trying to use react-player in my Next.js app without any luck.

This code

import ReactPlayer from "react-player";

const Home = () => {
return (
  <div>
    <p>Here is my video!!</p>
    <div className={s.wrapper}>
      <ReactPlayer src='https://www.youtube.com/watch?v=zohpogt56Bg' width="100%" 
       height="100%" className={s.player} />
    </div>
  </div>
)}

keeps throwing this error: Error: Hydration failed because the initial UI does not match what was rendered on the server.

Does anybody knows what is going on? thanks!

I'm having the same problem (using the url prop). versions are as follows: ```"next": "12.1.6", "react": "18.1.0", "react-dom": "18.1.0", "react-player": "^2.10.1"``` — c-concat-p, May 17 '22 at 18:33

score 27 · Answer 1 · answered May 17 '22 at 18:44

27

You can change your import to utilize Next's dynamic import. If you are only using static site generation then this option should work for you. It does seem like a bandaid fix however, because I don't think it solves the root problem.

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

answered May 17 '22 at 18:44

c-concat-p

356
3
9

How do I get typescript information? – Meera Datey May 22 '23 at 05:12

score 16 · Answer 2 · answered Jul 21 '22 at 06:14

Have you tried this?

It's basically checking the window.

import ReactPlayer from "react-player";

const Home = () => {
const [hasWindow, setHasWindow] = useState(false);
  useEffect(() => {
    if (typeof window !== "undefined") {
      setHasWindow(true);
    }
  }, []);
return (
  <div>
    <p>Here is my video!!</p>
    <div className={s.wrapper}>
      {
        hasWindow && <ReactPlayer src='https://www.youtube.com/watch?v=zohpogt56Bg' 
        width="100%" 
        height="100%" className={s.player} />
    }
    </div>
  </div>
)}

Trying to use react-player throws a Hydration error

2 Answers2