javascript - ScrollTrigger with Next js

Question

im trying to use ScrollTrigger with Next js :

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

i got this error:

does anyone have a solution for this problem

Answer 1

UMD option

You can either load the UMD version (located under the dist/ subdirectory).

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

ESM option

OR use the default ESM format and transpile gsap library in Next.js.

To do so, you'll first need to install next-transpile-modules.

$ npm install next-transpile-modules

Then some extra setup in your next.config.js file is required.

// next.config.js
const withTM = require("next-transpile-modules")(["gsap"]);

module.exports = withTM({});

You'll be then able to import it the way you currently are.