Module not found: Can't resolve 'web3uikit'

[chrismogab]

Hi, after running yarn add web3uikit in my command
i then run yarn dev and get this error ::

Module not found: Can't resolve 'web3uikit'
1 | import { MoralisProvider } from "react-moralis";

2 | import { NotificationProvider } from "web3uikit";
3 | import "../styles/globals.css";

i dont find any reason why i am. getting this error
here is my Header.js

import { ConnectButton } from "web3uikit";

export default function Header() {
  return (
    <nav className="p-5 border-b-2 flex flex-row">
      <h1 className="py-4 px-4 font-bold text-3xl"> Decentralized Lottery</h1>
      <div className="ml-auto py-2 px-4">
        <ConnectButton moralisAuth={false} />
      </div>
    </nav>
  );
}

and here is my _app.js

import { MoralisProvider } from "react-moralis";
import { NotificationProvider } from "web3uikit";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return (
    <MoralisProvider initializeOnMount={false}>
      <NotificationProvider>
        <Component {...pageProps} />
      </NotificationProvider>
    </MoralisProvider>
  );
}

export default MyApp;
//done hay

[alymurtazamemon]

@chrismogab show your package.json, and try to remove node_modules folder and retry installing packages yarn install

[alymurtazamemon]

@chrismogab I have pushed the code you can check it is working

[chrismogab]

i ran yarn add webuikit and tried again it worked , thanks alot man !!

[ZahraaHawie]

Hello @alymurtazamemon @chrismogab I'm still getting the same error and it is not working (module not found: can't resolve 'web3uikit')
Appreciate if you can fix my repo here it is: https://github.com/zahraha97/test-nextjs-marketplace ( still at the beginning of moralis frontend of NFT marketplace)
Also im getting " [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Unable to snapshot resolve dependencies" while running yarn dev.. I actually ignore it.. any clue about it? Thanks

[ZahraaHawie]

@chrismogab @alymurtazamemon or if you please give me the instructions needed and I will follow up

[krakxn]

@zahraha97 Make a new discussion please, to keep this one organized. Cheers!

[AlexK020908]

same issue here , i've tried removing node modules

[krakxn]

In your package.json, change the web3uikit version by copying this there:

"web3uikit": "^0.1.163"

Now, uninstall node_modules
Then, do yarn install which will install all the dependencies again in a new node_modules folder

[krakxn]

Eh.. why do you wanna push again if you pushed it already? Or do you mean the link you provided does not have fully your local repo?

[chrismogab]

yes , the link i provided before does not ssem to have my local repo i dont know why

[krakxn]

The only explanation is you not committing changes, make a new remote repo and follow the same steps as before, but in the last one do git push origin main --force

[chrismogab]

thank you ! finally that solved it i was pushing without the force at the end it was not pushing my local. anyways this is my repo :: https://github.com/chrismogab/rafffle-new

[krakxn]

This is the Front-End for Raffle? Also, before I look into it, check if the repo is complete

[chrismogab]

yes, this is all i have uptill now when i am getting the error.

[krakxn]

Made a PR, merge them and also, in package.json - please change the name to whatever your repo's name is.

It should work fine now.

[ZahraaHawie]

Hello @krakxn .. Im getting the same error as @chrismogab

package.json

{
  "name": "nextjs-nftmarketplace",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "moralis": "^1.9.1",
    "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"
  }
}

so how you managed to fix that issue?

[ZahraaHawie]

Module not found: Can't resolve 'web3uikit'

[chrismogab]

@krakxn i merged and copy pasted the package.json into my local repo , then i changed the name the same as my local repo i ran yarn dev and still got the exact same error

[Rishi860]

I am facing the same error. None of the above suggestions fixes the issue.

[Rishi860]

nvm for me version 0.1.170 worked

[krakxn]

It was suggested above

[Rishi860]

Thanx, I guess there is some issues with the latest version 1.0.2. I tried different versions and for me 0.1.170 worked.

[Ahmed-Aghadi]

Refer this :-
web3ui/web3uikit#739

[gingercatLovesHerWife]

I ran into this problem, too. I tried the above version 1.0.170, but it still didn’t work.
I re-checked the github repository provided by the course, and found its web3uikit version is:
"web3uikit": "^0.1.159"
I changed the package.json file, deleted node_modules, ran 'yarn install', and boom! It finally worked!!

[Marklin2289]

thank you that works !

[0xCardiE]

You need to manually change dependencies in your package.json like below

  "dependencies": {
    "web3uikit": "0.1.170",

and then reinstall webkit, then it works.