Getting Error-Module not found: Can't resolve 'web3uikit' #1345

thdevnit · 2022-07-27T07:11:02Z

thdevnit
Jul 27, 2022

This is my Header.js codes

import { ConnectButton } from "web3uikit"

export default function Header() {
    return (
        <div>
            <ConnectButton moralisAuth={false} />
        </div>
    )
}

This is my Index.js

import Head from "next/head"
import styles from "../styles/Home.module.css"
//import ManualHeader from "../components/ManualHeader"
import Header from "../components/Header"

export default function Home() {
    return (
        <div className={styles.container}>
            <Head>
                <title>Smart Contract Lottery</title>
                <meta name="description" content="Our Smart Contract Lottery" />
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <Header />
            Helloo
        </div>
    )
}

This is my package.json file

{
  "name": "nextjs-smartcontract-lottery-fcc",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "moralis": "^1.10.0",
    "next": "12.2.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-moralis": "^1.4.0",
    "web3uikit": "^1.0.2"
  },
  "devDependencies": {
    "eslint": "8.20.0",
    "eslint-config-next": "12.2.3",
    "prettier": "^2.7.1"
  }
}

when i run command yarn run dev It's showing error

Module not found: Can't resolve 'web3uikit'
> 1 | import { ConnectButton } from "web3uikit"
  2 | 
  3 | export default function Header() {
  4 |     return (

Can someone please assist me with this problem.

ZahraaHawie · 2022-07-28T17:18:01Z

ZahraaHawie
Jul 28, 2022

Hello @thdevnit, try editing your package.json web3uikit:
"web3uikit": "^0.1.170"

6 replies

ZahraaHawie Jul 29, 2022

@thedevnit not even with "web3uikit": "^0.1.159" ? I actually had the same problem and it works when I changed the version of web3uikit

thdevnit Aug 1, 2022
Author

@zahraha97 not bro...

ZahraaHawie Aug 1, 2022

@thdevnit check this comment, hope it works for you.
web3ui/web3uikit#739 (comment)

ZahraaHawie Aug 1, 2022

@thdevnit you can post your issue on Moralis Forum also.

thdevnit Aug 17, 2022
Author

@zahraha97 Bro both of the versions are not working...Thanks for your valuable time

mattjaf · 2022-08-02T02:36:16Z

mattjaf
Aug 2, 2022

Try changing ConnectButton to ConnectWallet and importing it from @web3uikit/web3 if your using the later versions

it might get changed back to ConnectButton shortly

4 replies

ZahraaHawie Aug 2, 2022

@thdevnit

SebasAran16 Aug 2, 2022

@mattjaf Thank you very much man, was about to search where the Connect Button is in the newer version of web3uikit, u saved me some time <3

mattjaf Aug 2, 2022

It got changed back to ConnectButton this morning

thdevnit Aug 17, 2022
Author

@mattjaf Bro Thanks for your valuable time but it's not working..

deAgora · 2022-08-02T11:13:45Z

deAgora
Aug 2, 2022

@thdevnit Had the same issue, I started with a clean slate from the beginning of the lesson (thank god for Github). After 'yarn create next-app .' instead of following the terminal commands to install Moralis and web3uikit as per Patrick's instructions I copy-pasted the package.json file contents in the repo into my local package.json file (with all the same versions as Patrick uses) and typed 'yarn install' in the terminal. This will install all the dependencies (both Moralis and web3uikit have newer versions) with the correct versions that are able to work with eachother: I suspect that the newer versions of both Moralis and Web3UIkit don't work well together). After doing so all the problems you mentioned went away.

On a sidenote; my node did spit out a bunch of warnings pertaining to -Module not found: Error: Can’t resolve ‘magic-sdk’-. I found that installing 'yarn add magic-sdk @walletconnect/web3-provider @web3auth/web3auth' fixed these warning messages and let me continue with the course.

I hope this helps for you brother. If not, let us know.

6 replies

thdevnit Aug 17, 2022
Author

@deAgora bro Thank you so much.....finally I got the solution.

deAgora Aug 17, 2022

@thdevnit good luck on your coding endeavors!

deAgora Aug 17, 2022

@thdevnit on a related note, if things are working this issue can be closed I assume?

thdevnit Aug 17, 2022
Author

Yeah.....will close now

PrintRH Sep 13, 2022

Just wanna say that the additional help to install that line of code below has been massively helpful!

yarn add magic-sdk @walletconnect/web3-provider @web3auth/web3auth

Thanks @deAgora ! 😄

kitety · 2022-08-17T17:41:26Z

kitety
Aug 17, 2022

您好，您的邮件已经收到。

0 replies

Getting Error-Module not found: Can't resolve 'web3uikit' #1345

Uh oh!

Replies: 4 comments · 16 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

thdevnit Aug 1, 2022 Author

Uh oh!

Uh oh!

Uh oh!

thdevnit Aug 17, 2022 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

thdevnit Aug 17, 2022 Author

Uh oh!

Uh oh!

thdevnit Aug 17, 2022 Author

Uh oh!

Uh oh!

Uh oh!

thdevnit Aug 17, 2022 Author

Uh oh!

Uh oh!

Uh oh!

Replies: 4 comments 16 replies

thdevnit Aug 1, 2022
Author

thdevnit Aug 17, 2022
Author

thdevnit Aug 17, 2022
Author

thdevnit Aug 17, 2022
Author

thdevnit Aug 17, 2022
Author