0

I would like to use a scroll snap package in my next.js project but I receive the following error: What should I add and where to make it work?

enter image description here

Related code:

    export const Navbar = () => {
      const scrollRef = useRef(null);
      useScrollSnap({ ref: scrollRef, duration: 100, delay: 50 });
    
      return (
        <>
          <header className='flex justify-between items-center w-full h-24 mx-0 px-12 lg:px-[89px] bg-transparent'>
            <div className=' w-8 h-8'>
              <Link href='/'>
                <a ref={scrollRef}>
                  <Image src='/img/logo1.svg' width={148} height={147} />
                </a>
              </Link>
            </div>
            <nav>
              <ul className='flex space-x-8 items-center'>
                <li>
                  <Link href='/#projects' scroll={false}>
                    <a ref={scrollRef}>Projects</a>
                  </Link>
                </li>
                <li>
                  <Link href='/#about' scroll={false}>
                    <a ref={scrollRef}>About</a>
                  </Link>
                </li>
                <li>
                  <Link href='/#contact' scroll={false}>
                    <a ref={scrollRef}>Contact</a>
                  </Link>
                </li>
          </ul>
        </nav>
      </header>
    </>
  );
};
evll
  • 97
  • 3
  • 12
  • Does this answer your question? [Import ES module in Next.js ERR\_REQUIRE\_ESM](https://stackoverflow.com/questions/65974337/import-es-module-in-next-js-err-require-esm) – juliomalves Jan 29 '22 at 14:49

1 Answers1

0

I got the same kind of problem using pure ES module with a version of nextjs below 12. You can refer to this question on this topic. Personally the best way I found to solve this issue was to update nextjs to version 12.

Julien Cardinal
  • 21
  • 3
  • I installed next.js 12 but the problem still remained. The issue could be with the package as it doesn't work with #places. – evll Jan 30 '22 at 12:51