使用 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 选项

或者在 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";