Início / coding / Perguntas / 76920164
Accepted
Mirzohid Salimov
Asked: 2023-08-17 17:27:33 +0800 CST

ReferenceError: o documento não está definido em Next.js

  • 772

Estou tentando integrar a biblioteca ScrollReveal em meu aplicativo Next.js. Estou encontrando um erro quando uso ScrollReveal dentro de um useEffectgancho. A mensagem de erro é:

ReferenceError: o documento não está definido

Entendo que esse erro geralmente ocorre ao tentar acessar o DOM em um ambiente sem navegador, mas não tenho certeza de como resolver esse problema especificamente em um aplicativo Next.js.

Aqui está a aparência da parte relevante do meu código:

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;

Já tentei usar useLayoutEffect em vez de useEffect, mas o problema persiste. Também vi sugestões para verificar condicionalmente a janela antes de usar ScrollReveal, mas isso também não funcionou.

Alguém poderia me orientar sobre como integrar corretamente o ScrollReveal em um aplicativo Next.js para evitar esse erro? Eu apreciaria muito quaisquer insights ou soluções para resolver este problema.

Agradeço antecipadamente por sua ajuda!

next.js

1 respostas

  1. Best Answer

    ScrollReveal não parece ser Next.js e renderização do lado do servidor amigável. A biblioteca parece executar código específico do navegador na importação .

    Você pode corrigir seu problema com carregamento lento :

    // app/page.js

import dynamic from "next/dynamic";

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

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

relate perguntas