尝试使用反应播放器会引发水合错误

Question

你好你好吗？我试图react-player在我的 Next.js 应用程序中使用，但没有任何运气。

这段代码

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>
)}

不断抛出此错误：错误：水合失败，因为初始 UI 与服务器上呈现的内容不匹配。

有人知道发生了什么事吗？谢谢！

Answer 1

您可以更改导入以利用 Next 的动态导入。如果您仅使用静态站点生成，那么此选项应该适合您。然而，这看起来确实像是一个创可贴修复，因为我不认为它解决了根本问题。

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

Answer 2

你试过这个吗？

它基本上是检查窗口。

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>
)}