主页 / coding / 问题 / 76920164
Accepted
Mirzohid Salimov
Asked: 2023-08-17 17:27:33 +0800 CST

ReferenceError：Next.js 中未定义文档

  • 772

我正在尝试将 ScrollReveal 库集成到我的 Next.js 应用程序中。当我在挂钩内使用 ScrollReveal 时遇到错误useEffect。错误信息是：

ReferenceError：文档未定义

据我所知，当尝试在非浏览器环境中访问 DOM 时，通常会发生此错误，但我不确定如何在 Next.js 应用程序中专门解决此问题。

我的代码的相关部分如下所示：

import { useEffect } from 'react';
import ScrollReveal from 'scrollreveal';

function MyComponent() {
  useEffect(() => {
    const sr = ScrollReveal();

    sr.reveal('.my-element', {
      // ... options
    });
  }, []);

  return (
    <div className="my-element">
      {/* ... component content */}
    </div>
  );
}

export default MyComponent;

我尝试使用 useLayoutEffect 而不是 useEffect，但问题仍然存在。我还看到了在使用 ScrollReveal 之前有条件地检查窗口的建议，但这似乎也不起作用。

有人可以指导我如何在 Next.js 应用程序中正确集成 ScrollReveal 以避免此错误吗？我将非常感谢任何解决此问题的见解或解决方案。

预先感谢您的帮助！

next.js

1 个回答

  1. Best Answer

    ScrollReveal 似乎对 Next.js 和服务器端渲染不友好。该库似乎在 import 上执行特定于浏览器的代码。

    您可以通过延迟加载来解决您的问题：

    // app/page.js

import dynamic from "next/dynamic";

const MyComponent = dynamic(() => import("./MyComponent"), {
  ssr: false,
});

export default function Page() {
  return <MyComponent />;
}
    • 0

相关问题