Import ERROR with ScrollTrigger in Next JS

[IbraheemHaseeb 2 Likes (Newbie)]

whenever I use on simple GSAP it works brilliant in NEXT JS but with ScrollTrigger it gives an import error. My code is:

import styles from "../styles/Home.module.css";

import Link from "next/link";

 

import { gsap } from "gsap";

import { useEffect, useRef } from "react";

import { ScrollTrigger } from "gsap/ScrollTrigger";

 

export default function Home() {

  const first = useRef();

 

  useEffect(() => {

    gsap.registerPlugin(ScrollTrigger);

 

    gsap.set(first.current, {

      y: 0,

    });

    gsap.to(

      first.current,

      {

        y: -100,

        scrollTrigger: {

          markers: true,

          start: "top center",

        },

      },

      2

    );

  }, []);

 

  return (

    <div className={styles.home}>

      <section className={styles.first}>

        <h1 ref={first}>This is first page</h1>

      </section>

      <section className={styles.second}>

        <h1>This is second page</h1>

      </section>

    </div>

  );

and the error is:

Server Error

SyntaxError: Cannot use import statement outside a module

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Call Stack

<unknown>

file:///D:/next%20js/fyn/node_modules/gsap/ScrollTrigger.js (12)

wrapSafe

internal/modules/cjs/loader.js (1001:16)

Module._compile

internal/modules/cjs/loader.js (1049:27)

Object.Module._extensions..js

internal/modules/cjs/loader.js (1114:10)

Module.load

internal/modules/cjs/loader.js (950:32)

Function.Module._load

internal/modules/cjs/loader.js (790:14)

Module.require

internal/modules/cjs/loader.js (974:19)

 

 

Please guide me what's the issue here...

[GreenSock 16,928 Likes (Superhero)]

That's a problem with your build system somewhere, unrelated to GSAP. 

 

It sounds like your setup doesn't understand ES Modules, but you are importing the GSAP ES Modules. So try importing the UMD files from the /dist/ directory like: 

import gsap from "gsap/dist/gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger";