bug: Next.js 14 App Router failing to compile

[exceedxo]

Is there an existing issue for this?

• I have searched the existing issues

Package Version

1.19.5

Current Behavior

When trying to run "npm run dev" (next dev), and trying to use wagmi/viem, Next is unable to compile and start my website.

   ▲ Next.js 14.0.3
   - Local:        http://localhost:3000
   - Environments: .env

 ✓ Ready in 2.7s
 ○ Compiling / ...
 ⚠ ./node_modules/node-gyp-build/index.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/node-gyp-build/index.js
./node_modules/utf-8-validate/index.js
./node_modules/ws/lib/validation.js
./node_modules/ws/lib/sender.js
./node_modules/ws/wrapper.mjs
./node_modules/isows/_esm/index.js
./node_modules/viem/_esm/utils/rpc.js
./node_modules/viem/_esm/clients/transports/webSocket.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
./node_modules/wagmi/dist/index.js
./app/providers/providers.tsx
 ⚠ ./node_modules/node-gyp-build/index.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/node-gyp-build/index.js
./node_modules/utf-8-validate/index.js
./node_modules/ws/lib/validation.js
./node_modules/ws/lib/sender.js
./node_modules/ws/wrapper.mjs
./node_modules/isows/_esm/index.js
./node_modules/viem/_esm/utils/rpc.js
./node_modules/viem/_esm/clients/transports/webSocket.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
./node_modules/wagmi/dist/index.js
./app/providers/providers.tsx
 ⚠ ./node_modules/node-gyp-build/index.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/node-gyp-build/index.js
./node_modules/utf-8-validate/index.js
./node_modules/ws/lib/validation.js
./node_modules/ws/lib/sender.js
./node_modules/ws/wrapper.mjs
./node_modules/isows/_esm/index.js
./node_modules/viem/_esm/utils/rpc.js
./node_modules/viem/_esm/clients/transports/webSocket.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
./node_modules/wagmi/dist/index.js
./app/providers/providers.tsx
 ⚠ ./node_modules/node-gyp-build/index.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

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/receiver.js
./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/@wagmi/core/dist/chunk-TSH6VVF4.js
./node_modules/@wagmi/core/dist/index.js
./node_modules/wagmi/dist/index.js
./app/providers/providers.tsx
 ⚠ The "images.domains" configuration is deprecated. Please use "images.remotePatterns" configuration instead.

Expected Behavior

No response

Steps To Reproduce

No response

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

https://codesandbox.io/p/devbox/quiet-water-6rcfry

Anything else?

This happens on a fresh Next.js 14 App Router project when trying to use wagmi, but the issue seems to be related to viem.

Things i already tried:
wevm/wagmi#2300 (comment)
Reinstalling node_modules

When i remove wagmi & viem, my app is able to compile again.

[lubojanski]

same issue, except that it compiles with warnings.

viem 1.19.4
wagmi 1.4.7
nextjs 14.0.3

[imaksp]

Hi, it seems package json is empty or not viewable in you codesandbox link:
https://codesandbox.io/p/devbox/quiet-water-6rcfry?file=%2Fpackage.json

[jxom]

Seems that the cause here is because the ws library is wrapping CJS modules in an ESM module (ws/wrapper.mjs), and Next.js throws a warning for this. This seems to be more of an issue in ws (downstream library) rather than Viem, so might be best to open up an issue there (maybe there is reasoning behind the ESM wrapper).

[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 Viem version. If you have any questions or comments you can create a new discussion thread.