Topic: Error: Invalid hook call
Expected behavior No Error to be thrown, MDBBtn to work as a component.
Actual behavior
Receive: Error: 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 See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Resources (screenshots, code snippets etc.)
Here is output from "npm ls react"
λ npm ls react
+-- mdbreact@5.0.2
| `-- UNMET PEER DEPENDENCY react@17.0.1
`-- UNMET PEER DEPENDENCY react@17.0.2
snippet from package.json
"mdbreact": "^5.0.2",
"node-sass": "^4.14.1",
"npm": "^6.14.13",
"react": "^17.0.2",
"react-dom": "^17.0.1",
Code that is attempting to be ran (with import dependency)
import { MDBBtn, MDBIcon } from "mdbreact";
<MDBBtn gradient="purple">SIGN UP</MDBBtn>
^ Yes I have all other imports correct in the code above, this is just the snippet associated with MDBBtn component....
other I've seen this error with other people and no one has had it resolved or answered other than "check the version for react/react-dom etc..." and I have done that as you can see by package-json.... or I could be oblivious to something obvious regarding the version(s)....
Anyone got any ideas?
Hi!
You can try to run npm dedupe to remove unnecessary dependencies. If you are installing the mdbreact package from npm - you can try to use the instructions below:
- Open your project directory (in my case that was a simple one made with Create React App)
- Remove node_modules catalog and clean cache of your npm or yarn to make sure that everything will install properly
- In the package.json file remove react and react-dom dependencies.
- Now run
npm install mdbreact - Import style files into the src/index.js before the App.js file import:
import '@fortawesome/fontawesome-free/css/all.min.css'; import 'bootstrap-css-only/css/bootstrap.min.css'; import 'mdbreact/dist/css/mdb.css';
Now try to run yarn or npm install to install dependencies Run your app and check if the problem still occurs. If not - please write back :)
Keep coding!
Bobby Renecker commented 3 years ago
Hey! Thanks for replying... So I tried the steps above, twice through to make sure I tried all the things your steps involved... I still found no luck =.
Here is what my index.js file looks like to match up with what you described in #5
import React from 'react'; import ReactDOM from 'react-dom';
import '@fortawesome/fontawesome-free/css/all.min.css'; import 'bootstrap-css-only/css/bootstrap.min.css'; import 'mdbreact/dist/css/mdb.css';
import App from './App';
ReactDOM.render( , document.getElementById('root') );
Let me know if any specific module would be good to post here for more information.
For now, You could try installing mdbreact with yarn. First, install yarn using npm install --global yarn, and then follow the setup instructions using yarn. We will take a closer look at this issue soon.
Bobby Renecker commented 3 years ago
Thank you, i'll try that and let you know if it worked. It seems to be only occurring when I attempt to use a MDBBtn component.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: MDB4 5.0.1
- Device: Computer
- Browser: Firefox
- OS: Windows
- Provided sample code: No
- Provided link: Yes