WalletcConnect doesn't pop-up!

[PIETRO]

The import:
const {
authenticate,
isAuthenticated,
isAuthenticating,
user,
logout,
isUnauthenticated,

Moralis,

} = useMoralis();

That’s the function:

const login = async () => {
if (!isAuthenticated) {
await authenticate({ provider: “walletconnect” }).catch(function (error) {
console.log(error);
});
}
};

The function call:

Connect Wallet

What am i missing? if i didn’t specify wallet connect it works with metamask, but if i insert “provider: “walletconnect”” it does nothing, no error.

[qudusayo]

You can check here how to format code on forum:

READ BEFORE POSTING - How to post code in the forum

How to post readable code in the forum You can use the “Preformatted Text” button to encapsulate any kind of code you want to show in your post. The demonstration, below, shows you how, and what the formatted code will look like: function formatText() { let words = "I'm a preformatted text button. Please use me wisely!"; } [image] [preformatted text]

[qudusayo]

Make sure you have @walletconnect/web3-provider added to your packages

[PIETRO]

@qudusayo

@walletconnect/web3-provider

Installed now via NPM… now gives this error:

Compiled with problems:X

ERROR in ./node_modules/cipher-base/index.js 3:16-43

Module not found: Error: Can’t resolve ‘stream’ in ‘/Users/pietro/MarsDao_Contract/node_modules/cipher-base’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback ‘resolve.fallback: { “stream”: require.resolve(“stream-browserify”) }’
- install ‘stream-browserify’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “stream”: false }

ERROR in ./node_modules/eth-sig-util/node_modules/ethereumjs-util/dist/index.js 17:13-30

Module not found: Error: Can’t resolve ‘assert’ in ‘/Users/pietro/MarsDao_Contract/node_modules/eth-sig-util/node_modules/ethereumjs-util/dist’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback ‘resolve.fallback: { “assert”: require.resolve(“assert/”) }’
- install ‘assert’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “assert”: false }

ERROR in ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/account.js 8:13-30

Module not found: Error: Can’t resolve ‘assert’ in ‘/Users/pietro/MarsDao_Contract/node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback ‘resolve.fallback: { “assert”: require.resolve(“assert/”) }’
- install ‘assert’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “assert”: false }

ERROR in ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/object.js 8:13-30

Module not found: Error: Can’t resolve ‘assert’ in ‘/Users/pietro/MarsDao_Contract/node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback ‘resolve.fallback: { “assert”: require.resolve(“assert/”) }’
- install ‘assert’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “assert”: false }

ERROR in ./node_modules/ethereumjs-tx/node_modules/ethereumjs-util/dist/index.js 17:13-30

Module not found: Error: Can’t resolve ‘assert’ in ‘/Users/pietro/MarsDao_Contract/node_modules/ethereumjs-tx/node_modules/ethereumjs-util/dist’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback ‘resolve.fallback: { “assert”: require.resolve(“assert/”) }’
- install ‘assert’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “assert”: false }

ERROR in ./node_modules/safe-event-emitter/index.js 1:13-28

Module not found: Error: Can’t resolve ‘util’ in ‘/Users/pietro/MarsDao_Contract/node_modules/safe-event-emitter’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback ‘resolve.fallback: { “util”: require.resolve(“util/”) }’
- install ‘util’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “util”: false }

ERROR in ./node_modules/web3-provider-engine/index.js 3:17-41

Module not found: Error: Can’t resolve ‘util’ in ‘/Users/pietro/MarsDao_Contract/node_modules/web3-provider-engine’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback ‘resolve.fallback: { “util”: require.resolve(“util/”) }’
- install ‘util’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “util”: false }

ERROR in ./node_modules/web3-provider-engine/node_modules/ethereumjs-util/dist/index.js 17:13-30

Module not found: Error: Can’t resolve ‘assert’ in ‘/Users/pietro/MarsDao_Contract/node_modules/web3-provider-engine/node_modules/ethereumjs-util/dist’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback ‘resolve.fallback: { “assert”: require.resolve(“assert/”) }’
- install ‘assert’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “assert”: false }

ERROR in ./node_modules/web3-provider-engine/subproviders/fixture.js 1:17-41

Module not found: Error: Can’t resolve ‘util’ in ‘/Users/pietro/MarsDao_Contract/node_modules/web3-provider-engine/subproviders’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback ‘resolve.fallback: { “util”: require.resolve(“util/”) }’
- install ‘util’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “util”: false }

ERROR in ./node_modules/web3-provider-engine/subproviders/hooked-wallet.js 12:17-41

Module not found: Error: Can’t resolve ‘util’ in ‘/Users/pietro/MarsDao_Contract/node_modules/web3-provider-engine/subproviders’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback ‘resolve.fallback: { “util”: require.resolve(“util/”) }’
- install ‘util’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “util”: false }

ERROR in ./node_modules/web3-provider-engine/subproviders/nonce-tracker.js 1:17-41

Module not found: Error: Can’t resolve ‘util’ in ‘/Users/pietro/MarsDao_Contract/node_modules/web3-provider-engine/subproviders’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback ‘resolve.fallback: { “util”: require.resolve(“util/”) }’
- install ‘util’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “util”: false }

ERROR in ./node_modules/web3-provider-engine/util/stoplight.js 3:17-41

Module not found: Error: Can’t resolve ‘util’ in ‘/Users/pietro/MarsDao_Contract/node_modules/web3-provider-engine/util’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback ‘resolve.fallback: { “util”: require.resolve(“util/”) }’
- install ‘util’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “util”: false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 37:11-26

Module not found: Error: Can’t resolve ‘http’ in ‘/Users/pietro/MarsDao_Contract/node_modules/xhr2-cookies/dist’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback ‘resolve.fallback: { “http”: require.resolve(“stream-http”) }’
- install ‘stream-http’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “http”: false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28

Module not found: Error: Can’t resolve ‘https’ in ‘/Users/pietro/MarsDao_Contract/node_modules/xhr2-cookies/dist’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback ‘resolve.fallback: { “https”: require.resolve(“https-browserify”) }’
- install ‘https-browserify’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “https”: false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 41:9-22

Module not found: Error: Can’t resolve ‘os’ in ‘/Users/pietro/MarsDao_Contract/node_modules/xhr2-cookies/dist’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback ‘resolve.fallback: { “os”: require.resolve(“os-browserify/browser”) }’
- install ‘os-browserify’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “os”: false }

[qudusayo]

This might not affect your system really. A way around is to downgrade react-scripts to 4.0.3

[PIETRO]

Installet version 4.0.3 of the react-scripts (changing the package.json and package-lock.json, removed the node modules folder and then run “npm i”) after that a new error pops up:

Compiled with problems:X

ERROR in ./node_modules/cipher-base/index.js 3:16-43

Module not found: Error: Can't resolve 'stream' in '/Users/pietro/MarsDao_Contract/node_modules/cipher-base'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
	- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "stream": false }


ERROR in ./node_modules/eth-sig-util/node_modules/ethereumjs-util/dist/index.js 17:13-30

Module not found: Error: Can't resolve 'assert' in '/Users/pietro/MarsDao_Contract/node_modules/eth-sig-util/node_modules/ethereumjs-util/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/account.js 8:13-30

Module not found: Error: Can't resolve 'assert' in '/Users/pietro/MarsDao_Contract/node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/object.js 8:13-30

Module not found: Error: Can't resolve 'assert' in '/Users/pietro/MarsDao_Contract/node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/ethereumjs-tx/node_modules/ethereumjs-util/dist/index.js 17:13-30

Module not found: Error: Can't resolve 'assert' in '/Users/pietro/MarsDao_Contract/node_modules/ethereumjs-tx/node_modules/ethereumjs-util/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/safe-event-emitter/index.js 1:13-28

Module not found: Error: Can't resolve 'util' in '/Users/pietro/MarsDao_Contract/node_modules/safe-event-emitter'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
	- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "util": false }


ERROR in ./node_modules/web3-provider-engine/index.js 3:17-41

Module not found: Error: Can't resolve 'util' in '/Users/pietro/MarsDao_Contract/node_modules/web3-provider-engine'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
	- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "util": false }


ERROR in ./node_modules/web3-provider-engine/node_modules/ethereumjs-util/dist/index.js 17:13-30

Module not found: Error: Can't resolve 'assert' in '/Users/pietro/MarsDao_Contract/node_modules/web3-provider-engine/node_modules/ethereumjs-util/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/web3-provider-engine/subproviders/fixture.js 1:17-41

Module not found: Error: Can't resolve 'util' in '/Users/pietro/MarsDao_Contract/node_modules/web3-provider-engine/subproviders'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
	- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "util": false }


ERROR in ./node_modules/web3-provider-engine/subproviders/hooked-wallet.js 12:17-41

Module not found: Error: Can't resolve 'util' in '/Users/pietro/MarsDao_Contract/node_modules/web3-provider-engine/subproviders'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
	- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "util": false }


ERROR in ./node_modules/web3-provider-engine/subproviders/nonce-tracker.js 1:17-41

Module not found: Error: Can't resolve 'util' in '/Users/pietro/MarsDao_Contract/node_modules/web3-provider-engine/subproviders'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
	- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "util": false }


ERROR in ./node_modules/web3-provider-engine/util/stoplight.js 3:17-41

Module not found: Error: Can't resolve 'util' in '/Users/pietro/MarsDao_Contract/node_modules/web3-provider-engine/util'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
	- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "util": false }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 37:11-26

Module not found: Error: Can't resolve 'http' in '/Users/pietro/MarsDao_Contract/node_modules/xhr2-cookies/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
	- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "http": false }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28

Module not found: Error: Can't resolve 'https' in '/Users/pietro/MarsDao_Contract/node_modules/xhr2-cookies/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
	- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "https": false }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 41:9-22

Module not found: Error: Can't resolve 'os' in '/Users/pietro/MarsDao_Contract/node_modules/xhr2-cookies/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
	- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "os": false }

IF I CLOSE THIS MODAL WITH THE ERRORS, THE WALLET CONNECT STILL NOT OPEN (that’s the version installed “@walletconnect/web3-provider”: “^1.7.8”,)

UPDATE
I’ve tried running NPM UPDATE and after all when i start the project all the tailwind css i’ve put seems not working but the basic html element remain and when i run the walletconnect it works.

[qudusayo]

You can drop your package.json file. That’ll be more helpful in resolving the issue

[PIETRO]

{
  "name": "mars-dao",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@openzeppelin/contracts": "^4.5.0",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "@walletconnect/web3-provider": "^1.7.8",
    "daisyui": "^2.14.3",
    "moralis": "^1.5.11",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-icons": "^4.3.1",
    "react-moralis": "^1.3.5",
    "react-router-dom": "^6.3.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@nomiclabs/hardhat-ethers": "^2.0.5",
    "@nomiclabs/hardhat-etherscan": "^3.0.3",
    "@nomiclabs/hardhat-waffle": "^2.0.3",
    "autoprefixer": "^10.4.5",
    "chai": "^4.3.6",
    "erc721a": "^3.2.0",
    "ethereum-waffle": "^3.4.4",
    "ethers": "^5.6.4",
    "hardhat": "^2.9.3",
    "postcss": "^8.4.13",
    "tailwindcss": "^3.0.24"
  }
}

[qudusayo]

With these packages, it should work fine,
make sure to remove node_modules and package-lock.js and run npm install again.

[PIETRO]

Done right now, there is always the css problem. Attached screenshot link

Screenshot

[alex]

Doublecheck all your Tailwind settings. Was it working before? Try removing and reinstalling it and postcss and setting up the config again. Otherwise you may need to use the older v2.

[PIETRO]

Yes before installing Walletconnect all was working fine

tried deleting tailwind.config and postcss.config, deleting node_modules and package-lock.json and re-installing via npm all the packages, then i run 1.
npx tailwindcss init -p

and copied the previuos configuration, nothing changes, css still not work

[PIETRO]

Solved the problem by restarting a new dapp with next.js and forcing update of all the packages, for the firs 10 minutes it was working, now on this code

 <button onClick={() => authenticate({ provider: "walletconnect" })}>
        connect
      </button>

this error pops up

UPDATE:
When i open up the websit ein incognito mode all seems working