使用Next.js的GSAPScrollTrigger
我正在尝试ScrollTrigger与 Next.js一起使用：
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
我收到此错误：
有没有人有这个问题的解决方案？
回答
UMD 选项
您可以加载UMD版本（位于dist/子目录下）。
import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
ESM 选项
或者在 Next.js 中使用默认的ESM格式和转译gsap库。
为此，您首先需要安装next-transpile-modules.
$ npm install next-transpile-modules
然后需要在您的next.config.js文件中进行一些额外的设置。
// next.config.js
const withTM = require("next-transpile-modules")(["gsap"]);
module.exports = withTM({});
然后，您就可以按照当前的方式导入它。
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";