The problem I have when using GSAP with NextJS + Typescript.

[bbg]

Hi everyone,

I want to use GSAP in my project with NextJS + Typescript. However, I am getting the error you will see in the screenshot.

My code to import the library;

import gsap from 'gsap';
import { Tween } from 'react-gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

const Homepage = (): JSX.Element => {
  const triggerRef = useRef(null);
  const [trigger, setTrigger] = useState(triggerRef.current);

  useEffect(() => {
    setTrigger(triggerRef.current);
  }, []);

  return (
    <ScrollTrigger start="-200px center" end="200px center" scrub={0.5} markers>
      <Tween
        to={{
          x: '300px',
        }}
      >
        <div style={{ width: '100px', height: '100px', background: '#ccc' }} />
      </Tween>
      <Tween
        to={{
          x: '300px',
        }}
      >
        <div style={{ width: '100px', height: '100px', background: '#999' }} />
      </Tween>
    </ScrollTrigger>
  );
};

Error;

Version information;

• "gsap": "^3.2.6"
• "next": "^10.2.0"
• "typescript": "^4.2.4"
• "react-gsap": "^3.2.1"

When I try with NextJS without Typescript, I get the same error.

Important: Uninstalling the react-gsap library resolves the error.

Thanks

[bitworking]

There is no react component at "gsap/ScrollTrigger". I think I have to update the documentation to make it clearer. Just import ScrollTrigger from "react-gsap" and you don't have to register the plugin.

So please try the following:

import { Tween, ScrollTrigger } from 'react-gsap';

const Homepage = (): JSX.Element => {
  return (
    <ScrollTrigger start="-200px center" end="200px center" scrub={0.5} markers>
      <Tween
        to={{
          x: '300px',
        }}
      >
        <div style={{ width: '100px', height: '100px', background: '#ccc' }} />
      </Tween>
      <Tween
        to={{
          x: '300px',
        }}
      >
        <div style={{ width: '100px', height: '100px', background: '#999' }} />
      </Tween>
    </ScrollTrigger>
  );
};

[bbg]

Thank you. As you said I did the problem was solved. The document is misleading. Updating is really important.