Документ не определен с использованием jQuery в nextjs 14 ⇐ Jquery

[Гость]

Я работаю над проектом, проект представлял собой шаблон WordPress, преобразованный в приложение Nextjs.
Они использовали jQuery и gsap для анимации. Проблема в том, что я получил ошибку 500 для документа в сети проверки.
Настоящая проблема в том, что анимация не влияет на первую загрузку страницы. Мне нужно перейти на другую страницу и вернуться на на предыдущей странице применяется анимация.

• Версия пакета jQuery: 3.7.1
• Следующая версия: 14.1.0
• Версия React: 18
• Версия React-dom: 18

и я получил ошибку в терминале при использовании jQuery:

node_modules\jquery\dist\jquery.js (24:26) @ document ⨯ TypeError:
Невозможно прочитать свойства неопределенного объекта (чтение «документа»)
в webpack_require (E:\Projects\nextjs\webmehrtech.next\server\webpack-runtime.js:33: 43)
at eval (./src/utils/buttonAnimation.js:5:64)
at (ssr)/./src/utils/buttonAnimation.js (E:\Projects\nextjs\webmehrtech .next\server\app\page.js:617:1)
в webpack_require (E:\Projects\nextjs\webmehrtech.next\server\webpack-runtime.js:33: 43)
at eval (./src/app/template.tsx:12:80)
at (ssr)/./src/app/template.tsx (E:\Projects\nextjs\webmehrtech .next\server\app\page.js:276:1)
в webpack_require (E:\Projects\nextjs\webmehrtech.next\server\webpack-runtime.js:33: 43)
null

Код: Выделить всё

buttonAnimation

file in

Код: Выделить всё

util

folder:

Код: Выделить всё

import { gsap } from "gsap";
import jQuery from "jquery";

export function buttonAnimation() {
if (typeof window !== "undefined") {
(function ($) {
"use strict";

$(".tp-hover-btn").on("mouseenter", function (e) {
var x = e.pageX - $(this).offset().left;
var y = e.pageY - $(this).offset().top;

$(this).find(".tp-btn-circle-dot").css({
top: y,
left: x,
});
});

$(".tp-hover-btn").on("mouseout", function (e) {
var x = e.pageX - $(this).offset().left;
var y = e.pageY - $(this).offset().top;

$(this).find(".tp-btn-circle-dot").css({
top: y,
left: x,
});
});

var hoverBtns = gsap.utils.toArray(".tp-hover-btn-wrapper");

const hoverBtnItem = gsap.utils.toArray(".tp-hover-btn-item");
hoverBtns.forEach((btn, i) => {
$(btn).mousemove(function (e) {
callParallax(e);
});
function callParallax(e) {
parallaxIt(e, hoverBtnItem[i], 80);
}

function parallaxIt(e, target, movement) {
var $this = $(btn);
var relX = e.pageX - $this.offset().left;
var relY = e.pageY - $this.offset().top;

gsap.to(target, 0.5, {
x: ((relX - $this.width() / 2) / $this.width()) * movement,
y: ((relY - $this.height() / 2) / $this.height()) * movement,
ease: Power2.easeOut,
});
}
$(btn).mouseleave(function (e) {
gsap.to(hoverBtnItem[i], 0.5, {
x: 0,
y: 0,
ease: Power2.easeOut,
});
});
});

if ($(".tp-btn-trigger").length > 0) {
gsap.set(".tp-btn-bounce", { y: -150, opacity: 0 });
const mybtn = gsap.utils.toArray(".tp-btn-bounce");
mybtn.forEach((btn) => {
var $this = $(btn);
gsap.to(btn, {
scrollTrigger: {
trigger: $this.closest(".tp-btn-trigger"),
start: "top center",
markers: false,
},
duration: 1.5,
delay: 1,
ease: "bounce.out",
y: 0,
opacity: 1,
});
});
}

if ($(".tp-btn-trigger-2").length > 0) {
gsap.set(".tp-btn-bounce-2", { y: -100, opacity: 0 });
const mybtn = gsap.utils.toArray(".tp-btn-bounce-2");
mybtn.forEach((btn) =>  {
var $this = $(btn);
gsap.to(btn, {
ScrollTrigger: {
триггер: $this.closest(».tp-btn-trigger -2"),
начало: "нижний низ",
маркеры: false,
},
продолжительность: 1,
легкость: "bounce.out",
y: 0,
непрозрачность: 1,
});
});

if ($(".tp -btn-trigger-3").length > 0) {
gsap.set(".tp-btn-bounce-3", { y: -100, непрозрачность: 0 });
var mybtn = gsap.utils.toArray(".tp-btn-bounce-3");
mybtn.forEach((btn) => {
var $this = $(btn);
gsap.to(btn, {
ScrollTrigger: {
триггер: $this.closest(".tp-btn-trigger-3"),
start: "-20% 20% ",
маркеры: false,
},
продолжительность: 1,
задержка: 1,2,
легкость: "bounce.out",
y: 0,
непрозрачность: 1,
});
});
 })(jQuery);
}< br />

Код моего файла template.tsx:

Код: Выделить всё

"use client";
import { useEffect } from "react";
import { usePathname } from "next/navigation";

import { buttonAnimation } from "@/utils/buttonAnimation";

const RootTemplate = ({ children }: { children: React.ReactNode }) => {
const pathname = usePathname();

useEffect(() => {
if (typeof window !== "undefined") {
buttonAnimation();
}
}, [pathname]);

return (

{children}

);
};

export default RootTemplate;

console network screenshot:




Источник: https://stackoverflow.com/questions/781 ... -nextjs-14