带有 Next.js 的 GSAP ScrollTrigger

Question

我正在尝试将 ScrollTrigger 与 Next.js 一起使用：

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

gsap.registerPlugin(ScrollTrigger);

我收到此错误：

有人有解决这个问题的办法吗？

Answer 1

UMD 选项

您可以加载 UMD 版本（位于 dist/ 子目录下）。

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

---

ESM 选项

OR 使用默认的 ESM 格式并在 Next.js 中转译 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";