[bug] web3modal with nextjs 14

[highree]

Link to minimal reproducible example

https://github.com/highree/web3modal-nextjs14-integration

Summary

at first i get the warning that web3modal has unmet peer dependency @wagmi/core>1

the i needed to add lit 3.0.0 to my package.json so i could prevent a multiple versions of @lit

now it seems to work well, but i got following error in the console:

Import trace for requested module: ./node_modules/node-gyp-build/index.js ./node_modules/bufferutil/index.js ./node_modules/isows/node_modules/ws/lib/buffer-util.js ./node_modules/isows/node_modules/ws/lib/receiver.js ./node_modules/isows/node_modules/ws/wrapper.mjs ./node_modules/isows/_esm/index.js ./node_modules/viem/_esm/utils/rpc.js ./node_modules/viem/_esm/clients/transports/http.js ./node_modules/viem/_esm/index.js ./node_modules/viem/_esm/utils/encoding/toRlp.js ./node_modules/viem/_esm/chains/celo/serializers.js ./node_modules/viem/_esm/chains/definitions/celo.js ./node_modules/viem/_esm/chains/index.js ./src/app/shared/wagmi-config.tsx ⚠ ./node_modules/node-gyp-build/index.js Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

any idea what i am doing wrong possibly ?

List of related npm package versions

"viem": "^1.19.7", "wagmi": "^1.4.7", "@wagmi/core": "^1.4.7", "@web3modal/wagmi": "^3.3.2",

[glitch-txs]

this issue is related to Wagmi/Viem, you can keep track here, there's also a workaround in the comments https://github.com/wagmi-dev/wagmi/issues/3232

[ccxdev]

Hello!

Also facing problem

"next": "13.5.1",
"viem": "^1.19.7",
"wagmi": "^1.4.7"

Error: Please call "createWeb3Modal" before using "useWeb3Modal" hook

https://stackblitz.com/edit/stackblitz-starters-xn5ytm?file=components%2Fpages%2Finner%2Fbutton.tsx

[glitch-txs]

@nekotoriy that's because you're not using your Provider wrapper in a global layout file. Highly suggest readying https://nextjs.org/docs on layouts topic

[ccxdev]

@glitch-txs

Not, I'm using

Check it out https://stackblitz.com/edit/stackblitz-starters-xn5ytm?file=app%2Flayout.tsx

[glitch-txs]

@nekotoriy true, will look into it

[ccxdev]

thanks!

[highree]

this issue is related to Wagmi/Viem, you can keep track here, there's also a workaround in the comments wagmi-dev/wagmi#3232

thanks, will follow ...

[glitch-txs]

@nekotoriy the issue is in the import path.

createWeb3Modal must be imported from '@web3modal/wagmi/react'

walletConnectProvider from '@web3modal/wagmi'

Check the custom config from docs: https://docs.walletconnect.com/web3modal/react/about?platform=wagmi

[xzilja]

Please refer to documentation specific to nextjs https://docs.walletconnect.com/web3modal/nextjs/about to understand all the quirks of serverside rendering and setting up front-end libs like web3modal.

[uonuon]

@web3modal/wagmi/react

@glitch-txs Worked for me Thanks!