[Bug] TypeError: _studio_freight_react_lenis__WEBPACK_IMPORTED_MODULE_6__.default is not a constructor

[Sunja-An]

Hi, I'm a student who studies FrontEnd.

I faced a type error here. First, I tried this code that

import Lenis from "@studio-freight/react-lenis";

let lenis;
const SmoothScroll = () => {
  lenis = new Lenis({
    lerp: 0.1,
    smooth: true,
  });

  const ScrollFn = (time: any) => {
    lenis.raf(time);

    requestAnimationFrame(ScrollFn);
  };
  requestAnimationFrame(ScrollFn);
};

I ran the dev server and I got a message that

TypeError: _studio_freight_react_lenis__WEBPACK_IMPORTED_MODULE_6__.default is not a constructor

After this error occurred, I changed the code that was written on the example.

export * from "@studio-freight/react-lenis";
import { ReactLenis, useLenis } from "@studio-freight/react-lenis";

const SmoothScroll = () => {
    function update(time: any) {
        lenisRef.current?.lenis?.raf(time * 1000);
    }
    gsap.ticker.add(update);

    return () => gsap.ticker.remove(update);
};

but it doesn't operate also.

And I made the custom hook file that is written the same code.

It is also too.

I use the Next.js 14 by using Typescript, Tailwind.

How can I do?

[clementroche]

Hi, "@studio-freight/react-lenis" has been deprecated in favor of "lenis/react". Please be sure it's up to date and read the documentation.

https://github.com/darkroomengineering/lenis/blob/main/packages/react/README.md

[Sunja-An]

Thank you for your response!

But I faced another error "GSAP target not found. https://gsap.com Error Component Stack".

I used that code on your README.md but I think that gsap object cannot be detected.

This is the code that was studied.

const lenisRef = useRef(null);
gsap.registerPlugin(ScrollTrigger);

useEffect(() => {
  const dom = {
    columns: document.querySelector(".section-col"),
    columnWraps: document.querySelectorAll(".section-col .column-wrap"),
    items: document.querySelectorAll(".section-cols .col-item"),
  };

  const SmoothScroll = () => {
    function update(time: any) {
      lenisRef.current?.lenis?.raf(time);
    }

    gsap.ticker.add(update);

    return () => gsap.ticker.remove(update);
  };

  const ScrollAni = () => {
    gsap
      .timeline({
        scrollTrigger: {
          start: 0,
          end: "max",
          scrub: true,
        },
      })
      .addLabel("start", 0)
      .to(
        dom.columns,
        {
          ease: "none",
          startAt: { scale: 1.2 },
          scale: 1,
        },
        "start"
      )
      .to(dom.items, {
        scrollTrigger: {
          start: 0,
          end: "top top",
          scrub: true,
        },
        ease: "power4.inOut",
        startAt: {
          opacity: 0,
          filter: "brightness(300%)",
        },

        opacity: 1,
        filter: "brightness(100%)",
        yoyo: true,
        repeat: 1,
      })
      .to(
        dom.columnWraps,
        {
          ease: "none",
          yPercent: (pos) => pos * -15,
        },
        "start"
      );
  };
  SmoothScroll();
  ScrollAni();
}, []);

Additionally, I wrote the code on the top level in the component!

[Sunja-An]

Sorry, I forgot the root option!

I changed to this code it works nicely!!

Thank you for your response!!