Проблема використання jQuery з Next.js: вирішення помилки "TypeError: Cannot read properties of undefined"

Проблема використання jQuery з Next.js: вирішення помилки “TypeError: Cannot read properties of undefined”

6 Березня 2024 в 20:53 26

Я намагався використати різні версії jquery (3.7.1 – 3.5.1), але це не змінило ситуацію. Я спробував додати jquery-3.7.1.min.js до тегу head, але це також не змінило нічого.

Вирішення цієї проблеми полягає в тому, щоб переконатися, що код jQuery виконується тільки після того, як DOM створено та вже доступний для маніпуляцій. Для цього потрібно використовувати більш прискорену функцію Next.js, яка називається useEffect() у React.

Для вирішення цієї проблеми достатньо змінити код компонента наступним чином:

export default function MyComponent() {
  useEffect(() => {
    $(document).ready(() => {
      const myClass = $(".myClass");
      console.log(myClass.prop("offsetHeight"));
    });
  }, []);
  return (
    <div className="myClass">
    </div>
  );
}