Блог

Я пытаюсь использовать 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

ИЛИ используйте формат ESM по умолчанию и gsap библиотеку transpile в Next.js .

Для этого вам сначала нужно установить 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";