react-use-scroll-snap next.js 中的 package 給出錯誤：語法錯誤：無法在模塊外使用導入語句

Question

我想在我的 next.js 項目中使用滾動快照 package 但我收到以下錯誤：我應該添加什么以及在哪里使它工作？

相關代碼：

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

Answer 1

我在使用nextjs版本低於12的純ES模塊時遇到了同樣的問題。您可以參考this question on this topic。 就個人而言，我發現解決此問題的最佳方法是將 nextjs 更新到版本 12。