GSAP ScrollTrigger Next.js

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.[=18= 中转译 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";