next.js 中的 react-use-scroll-snap 包给出错误：SyntaxError: Cannot use import statement outside a module

Question

我想在我的 next.js 项目中使用滚动快照包，但收到以下错误： 我应该添加什么以及在哪里使它起作用？

相关代码：

    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

我使用纯 ES 模块和 nextjs 版本低于 12 时遇到了同样的问题。 你可以参考this这个话题的问题。 就我个人而言，我发现解决此问题的最佳方法是将 nextjs 更新到版本 12。