Error: Invalid hook call.

Hello everyone!
I am new to the community and happy to be a member as well.

Maybe my issue may have been handled already, yet to find it. I am getting the error below and I do not know how to solve it. I am new to react too.

I have followed the solutions here but still could not get it done. Please I need help. Thank you.
https://github.com/facebook/react/issues/13991

I did not know how to apply these
:
https://github.com/yarnpkg/rfcs/blob/master/implemented/0000-selective-versions-resolutions.md

https://classic.yarnpkg.com/en/docs/selective-version-resolutions/

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.

Comments

[Jen]

Do you have a snippet to show us? it will be easier to help/dubug/point you in the right direction if so!

[ZacchNaa]

Please how do I add code snippets here? I tried and there was a liquid error.

[ZacchNaa]

Github Repo:
github.com/ZacchNaa/contacts-manager

[Jen]

Did you manage to resolve this? When I pulled your repo, and run your project, I'm not getting the error from http://localhost:3000/auth/register.

I added the debug line from the react docs for debugging this. Removing useHistory (and references to history) did not make a difference.

I suspect it is going to be a mismatching react issue. I'd suggest remove your node_modules directory, and removing package.lock and yarn.lock. Then run

1. $ yarn.
2. I also noticed you are missing $ react-router-dom so, also add that with yarn $ yarn react-router-dom

[ZacchNaa]

Okay! Still have not resolved it yet.
I'm just going to apply your recommendations and give a feedback.

Yes! the issues is with mismatching versions of react.

Clarification please: I installed yarn because npm was working so well for me, but now I think it is fine.
Do I really need both of them (yarn and npm) installed now? I don't know if that could be one of the causes but I just want to know.

Again, thanks so much @jen , I am really grateful

[Jen]

yarn and npm are both package managers, but they will install slightly differently. It doesn't matter which you use, just whichever you prefer, but stick to one. I recommend you just use yarn since your readme only references yarn.

I could see that you had used npm and yarn, since you had both package.lock and yarn.lock files in your repo. I can't tell you exactly what the issue was, but it must've been the interaction between having npm installed packages and yarn installed packages causing the mismatched version. It might've been the missing dependency too. :)

you're very welcome!

[ZacchNaa]

I was thinking react-router-dom is included in react-dom. Your input please.

[Jen]

when I tried to do yarn start on your project, I kept getting errors to do with react-router-dom being missing. You may have added this with npm without the --save flag. without it, it won't be added to your package.json but still installed in node_modules.yarn add will do this automatically.

p.s. my dev.to handle is @jenbutondevto :)

[ZacchNaa]

okay @jenbutondevto thank you very much

[ZacchNaa]

WOOOOOOOOOW!!! IT WORKED
I AM SO HAPPY! I had to put it aside, but after doing what you said everything is working great.
I removed: node_modules, package.lock, yarn.lock.
and installed react-router-dom
and it just great.
THANKS SO SO MUCH @jen ! I AM REALLY GRATEFUL.

[ZacchNaa]

When I remove the useHistory hook,
console.log(window.React1 === window.React2); returns TRUE

But, when I add it
console.log(window.React1 === window.React2); returns FALSE