Can't resolve 'fs' Error when reproducing the NextJs example

[Jam516]

Describe the bug

I added wagmi config to my NextJS project following the example given here https://github.com/family/connectkit/blob/main/examples/nextjs/pages/_app.tsx

and got this error

./node_modules/node-gyp-build/node-gyp-build.js:1:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/node-gyp-build/index.js
./node_modules/bufferutil/index.js
./node_modules/ws/lib/buffer-util.js
./node_modules/ws/lib/websocket.js
./node_modules/ws/index.js
./node_modules/@walletconnect/legacy-client/dist/esm/socket.js
./node_modules/@walletconnect/legacy-client/dist/esm/core.js
./node_modules/@walletconnect/legacy-client/dist/esm/index.js
./node_modules/@walletconnect/legacy-provider/dist/esm/signer.js
./node_modules/@walletconnect/legacy-provider/dist/esm/index.js
./node_modules/@wagmi/connectors/dist/walletConnectLegacy.js
./node_modules/@wagmi/core/dist/connectors/walletConnectLegacy.js
./node_modules/wagmi/dist/connectors/walletConnectLegacy.js
./node_modules/connectkit/build/index.es.js
./pages/_app.tsx

The project works when I remove the config from app.tsx (seen in screenshot)

To reproduce

Here is a Replit reproducing the problem
https://replit.com/@0xKofi/ConstantTelevisionFork?v=1

Expected behavior

Adding wagmi config should not throw an error like this. Something about the example project is off.

Screenshots

[lochie]

We've seen this issue before recently but it was due to the package-lock.json file not being correctly generated. It ended up working once we deleted the lock file and did a fresh npm install.

@Jam516 Give that a shot and let us know if that helped, but for what it's worth the fs package isn't used within ConnectKit, but it may be used within one of our peer dependencies, or this could be an issue within the version of Next.js.

[Jam516]

Deleting package-lock.json and node_modules then reinstalling didn't work for me sadly.

The project uses [email protected] . Upgraded to [email protected] but that didn't fix it.

[lochie]

Found an answer on the wagmi repo (thanks @jxom!) Looks like this only occurs if you don't have a the NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID env variable set up as this is an issue with WalletConnect v1 (which connectkit will fall back to if this ID is missing). So setting up this variable (or putting the string directly into the config) might fix this too.

Seems that WalletConnect unneccessarily pulls in Node.js dependencies (previously, Ethers.js polyfilled these, but polyfilling as a side-effect is generally not good practice).

You can mitigate this by polyfilling fs, etc in your Next.js config:

module.exports = {
  webpack: (config) => {
    config.resolve.fallback = { fs: false, net: false, tls: false }
    return config
  },
}

[Jam516]

Amazing, thanks so much!

Having the NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID variable set up didn't change things.

But adding this statement to the Next.js config did!

[montanaflynn]

This really should be in the docs / readme...