Lesson 10 Can't resolve 'web3uikit'

[Vodkasxr]

I encountered a problem here in Lesson 10.Can't resolve 'web3uikit'

ERROR
./components/Header.js:1:0
Module not found: Can't resolve 'web3uikit'

1 | import { ConnectButton } from "web3uikit";
2 |
3 | export default function Header() {
4 | return (

Import trace for requested module:
./pages/index.js
https://nextjs.org/docs/messages/module-not-found

I saw the previous method and deleted the node_ Modules folder, modify package.json file and yarn Lock file, execute the yarn command, the same as the following error.

ERROR
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Bus error (core dumped)
error Command failed with exit code 135.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

After downloading the repo, I ran the command yarn dev, and an error occurred. I don't know how to solve it.

ERROR
fabric@ubuntu:~/hh-fcc/xii/nextjs-smartcontract-lottery-fcc$ yarn dev
yarn run v1.22.15
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Bus error (core dumped)
error Command failed with exit code 135.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[obc92]

I had problems with web3uikit before I solved modifying the version in the package.json file

"web3uikit": "^0.1.159"

Delete node_modules again and run the yarn comand as you did. Hope it helps.

[Vodkasxr]

Thank you for your answer, but after I changed "web3uikit": "^ 0.1.159", delete the node_ Modules, execute yarn and it will automatically change back to "web3uikit": "^ 1.0.2"

[AjayAsnani]

I got the same type of error in this file
try installing= yarn add @web3uikit/web3
then try

[Vodkasxr]

Thank you for your help, but there will be some errors during installation in this way

error Command failed.
Exit code: 128
Command: git
Arguments: ls-remote --tags --heads https://github.com/ethereumjs/ethereumjs-abi.git
Directory: /home/fabric/hh-fcc/nextjs-smartcontract-lottery-fcc2
Output:
fatal: unable to access 'https://github.com/ethereumjs/ethereumjs-abi.git/': Failed to connect to github.com port 443: Connection refused
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Error: connect ECONNREFUSED 20.205.243.166:443
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16)

[AjayAsnani]

Try once again from scratch.

[mattjaf]

Okay here are a couple working solutions:

1: You can use the web3uikit version specified in Patricks repo
2: In later version of web3uikit <ConnectButton> accidentally got renamed to <ConnectWallet>
so you can import ConnectWallet instead
3: The newest version of web3uikit got split up in to a mono repo and the module got fixed an renamed back to ConnectButton, which can be imported as such:

    "@web3uikit/core": "latest",
    "@web3uikit/icons": "latest",
    "@web3uikit/styles": "latest",
    "@web3uikit/web3": "latest",

so you can paste

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

and import it as such

    import { ConnectButton} from "@web3uikit/web3"

When you download the newest version of web3uikit, it might throw and errror when you start up nextjs,

If it does, delete the node_module folder and yarnLock and run yarn in your front end directory to reinstall everything

[Vodkasxr]

Thank you for your help. However, the following error will occur when executing the command "yarn add @ web3uikit / core @ web3uikit / icons @ web3uikit / styles @ web3uikit / Web3" in this way:

error Command failed.
Exit code: 128
Command: git
Arguments: ls-remote https://github.com/ethereumjs/ethereumjs-abi.git HEAD
Directory: /home/fabric/hh-fcc/nextjs-smartcontract-lottery-fcc1
Output:
fatal: unable to access 'https://github.com/ethereumjs/ethereumjs-abi.git/': GnuTLS recv error (-54): Error in the pull function.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Error: connect ECONNREFUSED 20.205.243.166:443
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16)

Use delete node_ Module folder and yarn.lock file. The following error will occur when executing the yarn method:：
error Command failed.
Exit code: 128
Command: git
Arguments: ls-remote --tags --heads https://github.com/ethereumjs/ethereumjs-abi.git
Directory: /home/fabric/hh-fcc/nextjs-smartcontract-lottery-fcc1
Output:
fatal: unable to access 'https://github.com/ethereumjs/ethereumjs-abi.git/': Failed to connect to github.com port 443: Connection refused
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
Error: connect ECONNREFUSED 20.205.243.166:443
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16)

[navillanueva]

Thank you! Solution number 3 helped me solve this problem!

[levblanc]

Hi @Vodkasxr , I encountered similar issue you mentioned, my error message like so:

fatal: unable to access 'https://github.com/ethereumjs/ethereumjs-abi.git/': Failed to connect to github.com port 443 after 75006 ms: Operation timed out

Since connection in my place to Github is bad, I tried using a proxy and setup git global config with below command.

git config --global http.proxy <your-proxy-ip>:<your-proxy-port>

# example
git config --global http.proxy 127.0.0.1:1234  

After this setting, the following command works:

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

With the ui kit's packages separated, we may need to figure out where to get the components from by ourselves.
For example:

// In Patrick's lesson:
import { ConnectButton } from 'web3uikit';

// With latest packages:
import { ConnectButton } from '@web3uikit/web3';

Or you could install the same version in Patrick's repo with above git config to see if it works.

Hope this helps :)