importing ConnectButton from web3uikit gives Error: Invalid hook call. Hooks can only be called inside of the body of a function component

Question

I am using nextjs along with tailwind css and a bunch of other libraries like web3uikit. the app work totally fine but as soon as I import ConnectButton from web3uikit and use it in the sidebar component, it gives me the following error: 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.

Here's the link to the github repo, just cloning and install the dependencies would help you in setting up the project and then npm run dev.

Link: https://github.com/oneknucklehead/marketplace-web3

Answer 1

进入node_modules -> web3uikit-> node_modules 并删除其下的react文件夹

Answer 2

I believe it is a server-side rendering issue! A screenshot of how I got the <ConnectButton /> to render in a nextjs application is below:

Implementing the ConnectButton Component Screenshot

When the error popped up saying I had an invalid hook call, I closed the error box and the button was rendered in and when I click on it, it showed the web3Modal with the proper sign-in options. I thought that maybe it was a server-side issue

So I fixed it by using a useState hook with a boolean value as seen in the screenshot. It is false by default but will only become true when the component loads in(used a useEffect hook to implement) and I take advantage of that via conditional rendering which is also shown in the screenshot. Once I did that, I haven't encountered the issue at all! Hope this helps!