Next.js - TypeError: Cannot read properties of undefined (reading 'quickSetter') #26

Ericnsamba · 2023-03-13T19:31:08Z

Hey Guys, this is my first time using mouse-follower, I'm using Next.js and Tailwind and this is my layout.tsx in appDir. I'd appreciate any help 🙏

I'm getting the following error when I use the lib:

"use client";
import { useEffect, useRef, useState } from "react";
import { AnimatePresence} from "framer-motion";
import gsap from "gsap";
import Lenis from "@studio-freight/lenis";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { usePathname, useRouter } from "next/navigation";
import { MobileMenu } from "../components/Navigation/MobileMenu";
import NavBar from "../components/Navigation/Navbar";
import "../styles/globals.css";
import "../node_modules/locomotive-scroll/src/locomotive-scroll.scss";
import "../node_modules/mouse-follower/src/scss/index.scss";
import MouseFollower from "mouse-follower";

useEffect(() => {

    const cursor = new MouseFollower({
      container: '.mf-container',
      speed: 0.3
    });

    const lenis = new Lenis({
      duration: 1.2,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), 
      smooth: true,
      mouseMultiplier: 1,
      smoothTouch: false,
      touchMultiplier: 2,
      infinite: false,
    });

    function raf(time: any) {
      lenis.raf(time);
      ScrollTrigger.update();
      requestAnimationFrame(raf);
    }
    requestAnimationFrame(raf);
  });

return (
    <html>
      <head />
      <body
        data-scroll-container
        ref={ref}
        className=".mf-container flex bg-white min-h-screen flex-col container mx-auto max-w-screen-xl items-stretch dark:bg-black scrollbar-hide "
      >
        <AnimatePresence exitBeforeEnter mode="wait">
          <div className="data-scroll">{children}</div>
          <div data-cursor-stick=".stick-me" className="stick-me">Hover me to stick cursor!</div>
          <div className="nav hidden lg:flex bottom-10 fixed self-center">
            <NavBar />
          </div>
          <MobileMenu />
        </AnimatePresence>
      </body>
    </html>
  );

The text was updated successfully, but these errors were encountered:

Ericnsamba changed the title ~~TypeError: Cannot read properties of undefined (reading 'quickSetter')~~ Next.js - TypeError: Cannot read properties of undefined (reading 'quickSetter') Mar 13, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Next.js - TypeError: Cannot read properties of undefined (reading 'quickSetter') #26

Next.js - TypeError: Cannot read properties of undefined (reading 'quickSetter') #26

Ericnsamba commented Mar 13, 2023 •

edited

Next.js - TypeError: Cannot read properties of undefined (reading 'quickSetter') #26

Next.js - TypeError: Cannot read properties of undefined (reading 'quickSetter') #26

Comments

Ericnsamba commented Mar 13, 2023 • edited

Ericnsamba commented Mar 13, 2023 •

edited