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...