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期权

或在Next.js中使用默认的ESM格式和transpile 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";