2

I want to beautify my project using locomotive-scroll in my nextjs app. But I keep getting the error document is not defined. How can I solve this?

In short, this is what I need to know.

Thank you from now!

import React, { useEffect } from "react";
import locomotiveScroll from "locomotive-scroll";

function App() {
  const scrollRef = React.createRef();

  useEffect(() => {
    const scroll = new locomotiveScroll({
      el: scrollRef.current,
      smooth: true
    });
  });

  return (
      <div className="scroll" ref={scrollRef}>
        <h1 data-scroll data-scroll-speed="3" data-scroll-position="top">
          Locomotive Scroll in React
        </h1>
      </div>
  );
}
nigranac
  • 193
  • 3
  • 14
  • 1
    Does this answer your question: [How to correctly use Locomotive Scroll with Next.js routing?](https://stackoverflow.com/questions/68264720/how-to-correctly-use-locomotive-scroll-with-next-js-routing)? You need to dynamically import `locomotive-scroll` inside the `useEffect`. – juliomalves Jan 23 '22 at 16:56
  • I had looked at this before but it gave the same error :( – nigranac Jan 23 '22 at 20:50
  • Did you also remove `import locomotiveScroll from "locomotive-scroll";` at the top of the file? If you're importing and accessing `locomotive-scroll` only inside the `useEffect` you won't see the "document not defined" error. – juliomalves Jan 23 '22 at 20:53
  • 1
    Everything is under control now :) Thank you very much – nigranac Jan 23 '22 at 21:11

0 Answers0