Lesson 10 - web3uikit - ConnectButton module not found

[benjbright]

Hi all,

I had a problem running the web3uikit as kept getting an error message saying the <ConnectButton /> module was not found.

Looking at the web3uikit docs, the yarn add web3uikit method seems to have been updated to yarn add @web3uikit/core @web3uikit/web3 @web3uikit/icons however I couldn't get this to work and kept running into error messages on installation no matter what I tried.

This may just be a short term fix if older versions get deprecated, but the way I got the Connect Button working was as follows:

• replace the installed web3uikit dependency in the package.json file with "web3uikit": "^0.1.159" as per Patrick's repo
• re-run yarn install
• restart the terminal and then run yarn run dev again

This seems to work and I now have the button functionality working as per the course.

If anyone more experienced has a better or more long term fix please let me know!

[ZahraaHawie]

Hello @benjbright can't thank you enough for sharing this. It works finally 👍

[yersel500]

Yeah! It works well! 💪

[Ahmed-Aghadi]

There's an issue with latest version, you can refer this :-
web3ui/web3uikit#739

[ZahraaHawie]

@Ahmed-Aghadi
Yes "^0.1.170" for web3uikit also works for me. Thanks

[benjbright]

That's great thank you for the link Ahmed

[sushantreddycom]

Thanks @benjbright - I was stuck with this issue for 2 hours.

[mattjaf]

in the newer version the button accidentally got renamed to ConnectWallet, it got fixed this morning so its back to ConnectButton

from Billgil:
The web3uiKit monorepo is now live please import the slices of the repo you need as so

For all web3 components like connect wallet, Native Balance, etc.....
yarn add @web3uikit/web3

For all core components like button, input etc..
yarn add @web3uikit/core

For all icons
yarn add @web3uikit/icons

[ghost]

Yes, you are right. And I dont need to install old verions anymore. Where did you find that 'ConnectWallet' is a new name of this, because on their website its still a 'ConnectButton'? https://web3ui.github.io/web3uikit/?path=/story/1-web3-connectbutton--default

[mattjaf]

I pushed a PR and it got merged this morning, its back to ConnectButton

It was a minor typo

[benjbright]

Thanks guys - just run the new set up for Lesson 15, I'm starting the NextJS front end section and can confirm this seems to work fine now, so you can run:

yarn add @web3uikit/core @web3uikit/web3 @web3uikit/icons

Just remember to change the import line in your Header.jsx file as follows:

import { ConnectButton } from "@web3uikit/web3"

I just spent half an hour trying to import it from the core package wondering why it wasn't working... hopefully you will avoid that!

Cheers

Ben