Библиотека react-explode выдает ошибку «Неверный вызов ловушки»

Я пытаюсь использовать библиотеку response-explode в своем приложении для реагирования (созданном с помощью yarn create-react-app). Любое использование библиотеки приводит к сбою моего приложения во время выполнения со следующей ошибкой: Uncaught Error: Invalid hook call в консоли.

Это происходит даже в самом простом случае со следующим index.js файлом:

import React from 'react';
import ReactDOM from 'react-dom';
import Siargao from "react-explode/Siargao";

ReactDOM.render(
  <Siargao />,
  document.getElementById('root')
);

reactjs react-hooks

18.03.2022 01:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Похоже, вы используете более новую версию React, чем поддерживает react-explode.

зависимости package.json

"dependencies": {
  "eases": "^1.0.8",
  "eslint-plugin-babel": "^5.1.0",
  "eslint-plugin-import": "^2.12.0",
  "eslint-plugin-jsx-a11y": "^6.0.3",
  "eslint-plugin-react": "^7.16.0",
  "eslint-watch": "^7.0.0",
  "gsap": "^3.0.4",
  "react": "^16.11.0",
  "react-dom": "^16.11.0"
},

Используя React v16, он работает без проблем, но с v17 я могу воспроизвести ошибку ловушки.

Вот работающая демонстрация codeandbox с использованием React 16.14.0.

Edit react-explode-library-gives-invalid-hook-call-error

import React, { StrictMode } from "react";
import ReactDOM from "react-dom";
import Siargao from "react-explode/Siargao";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <Siargao repeat = {-1} size = {300} />
  </StrictMode>,
  rootElement
);

В проекте есть без вопросов, чтобы увеличить поддержку React. Последнее обновление репозитория было более 2 лет назад, поэтому, похоже, оно не находится в активной разработке.

Ты сможешь:

Сообщите о проблеме, чтобы увеличить поддержку, и надейтесь, что владелец обновит ее.
Разветвите и исправьте зависимости самостоятельно и
1. Поддерживайте свою собственную вилку
2. Откройте PR с репозиторием и надейтесь, что он будет объединен
Понизьте свою версию React (react и react-dom) до поддерживаемой версии ^16.11.0 и используйте.
Переходите к другому пакету.

спасибо! Мне также пришлось понизить версию react-dom до той же версии, и теперь она работает.

— 18.03.2022 17:14

@vonClem Правильно. react и react-dom версии должны совпадать всегда. Извините, что не назвал это прямо. Ваше здоровье.

— 18.03.2022 17:15

18.03.2022 01:21