bug: v1 dev build failing due to missing packages

[hammeiam]

Is there an existing issue for this?

• I have searched the existing issues

Package Version

1.0.1

Current Behavior

When spinning up a dev server of a fresh app with only latest (as of today) wagmi, rainbowkit, and viem installed, I see an error that prevents my build from completing.

Expected Behavior

The build completes without error.

Steps To Reproduce

• Create a fresh app using pnpm create @rainbow-me/rainbowkit@latest
• Start the dev server with pnpm run dev
• Observe that the build fails with an error

Link to Minimal Reproducible Example (StackBlitz, CodeSandbox, GitHub repo etc.)

No response

Anything else?

error - ./node_modules/.pnpm/node-gyp-build@4.6.0/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/.pnpm/node-gyp-build@4.6.0/node_modules/node-gyp-build/index.js
./node_modules/.pnpm/bufferutil@4.0.7/node_modules/bufferutil/index.js
./node_modules/.pnpm/ws@8.12.0/node_modules/ws/lib/buffer-util.js
./node_modules/.pnpm/ws@8.12.0/node_modules/ws/lib/websocket.js
./node_modules/.pnpm/ws@8.12.0/node_modules/ws/index.js
./node_modules/.pnpm/@walletconnect+legacy-client@2.0.0/node_modules/@walletconnect/legacy-client/dist/esm/socket.js
./node_modules/.pnpm/@walletconnect+legacy-client@2.0.0/node_modules/@walletconnect/legacy-client/dist/esm/core.js
./node_modules/.pnpm/@walletconnect+legacy-client@2.0.0/node_modules/@walletconnect/legacy-client/dist/esm/index.js
./node_modules/.pnpm/@walletconnect+legacy-provider@2.0.0/node_modules/@walletconnect/legacy-provider/dist/esm/signer.js
./node_modules/.pnpm/@walletconnect+legacy-provider@2.0.0/node_modules/@walletconnect/legacy-provider/dist/esm/index.js
./node_modules/.pnpm/@wagmi+connectors@1.0.1_@wagmi+chains@0.2.22_react@18.2.0_typescript@5.0.4_viem@0.3.19/node_modules/@wagmi/connectors/dist/walletConnectLegacy.js
./node_modules/.pnpm/@wagmi+core@1.0.1_react@18.2.0_typescript@5.0.4_viem@0.3.19/node_modules/@wagmi/core/dist/connectors/walletConnectLegacy.js
./node_modules/.pnpm/wagmi@1.0.1_react-dom@18.2.0_react@18.2.0_typescript@5.0.4_viem@0.3.19/node_modules/wagmi/dist/connectors/walletConnectLegacy.js
./node_modules/.pnpm/@rainbow-me+rainbowkit@1.0.0_@types+react@18.0.9_react-dom@18.2.0_react@18.2.0_viem@0.3.19_wagmi@1.0.1/node_modules/@rainbow-me/rainbowkit/dist/index.js
./pages/_app.tsx

https://nextjs.org/docs/messages/module-not-found

[jxom]

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
  },
}

[Drewsapple]

With walletconnect legacy being unused by most apps since its deprecation, how can we go about removing it instead of polyfilling junk for it to build?

I'm trying to use the edge runtime for nextjs, and I can't figure out if there's something I can do in my project, or if I need to open up a PR in wagmi or connectkit. Thanks.

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest wagmi version. If you have any other comments you can create a new discussion.