react-explode library gives "Invalid hook call" error

Question

I am trying to use the react-explode library in my react app (made with yarn create-react-app). Any use of the library causes my application to fail at runtime, with the following error: Uncaught Error: Invalid hook call in the console.

This happens even in the simplest case, with the following index.js file:

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

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

Answer 1

Looks like you are using a newer version of React than the react-explode supports.

package.json dependencies

"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"
},

Using React v16 it works without issue, but with v17 I can reproduce the hook error.

Here's a running codesandbox demo using React 16.14.0

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
);

There are no issues filed with the project to bump React support. The last update to the repo was 2+ years ago, so it doesn't appear to be in active development.

You can:

1. File the issue to bump support and hope the owner updates.
2. Fork and fix the dependencies yourself and
   1. Maintain your own fork
   2. Open a PR with the repo and hope it gets merged
3. Downgrade your version of React (react and react-dom) to a supported ^16.11.0 version and use.
4. Move on to another package.