Invalid Hook call when using the react-water-wave

user_9910484 0
Viewed 119

I need to setup the react-water-wave module in my react.js app:

https://github.com/homerchen19/react-water-wave

This is the sandbox I have so far:

https://codesandbox.io/embed/old-leaf-iqke2?fontsize=14&hidenavigation=1&theme=dark

The error I'm facing is:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

The code is:

import Background from "./background.jpeg";
import WaterWave from 'react-water-wave';
import './App.css';

function App() {

  let renderFirstold = () => {
    return (
        <WaterWave
        style={{
          width: "100%",
          height: "100vh",
          backgroundSize: "cover",
          background: `url(${Background}) no-repeat center center fixed`
        }}
        dropRadius={20}
        perturbance={0.01}
        interactive={true}
      >
      </WaterWave>
    )
  }

  return (
    <div className="App">
        {renderFirstold()}
    </div>
  );
}

export default App;

I can transition back to class based component if this is the issue. Please help me out.

reactjs
1 Answers

if you look at react-water-wave package.json its dependencies mark as dependency "react": "^16.9.0" meanwhile your sandbox uses react 17.0.2. this way you are facing the first case scenario:

1. You might have mismatching versions of React and the renderer (such as React DOM)

if you downgrade your react and react-dom to 16.9 it works as expected (you would also need to add back the import React from "react" to your files).

user_92381340
Related