Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

[victorvu18]

Is there an existing issue for this?

• I have searched the existing issues

Package Version

^1.4.7

Current Behavior

`./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/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
./node_modules/wagmi/dist/index.js
./src/context/web_3_modal.tsx`

Expected Behavior

No response

Steps To Reproduce

i use web3modal and nextjs 13 for my project. below is dependencies of my package.jon file:
"dependencies": { "@web3modal/ethereum": "^2.7.1", "@web3modal/react": "^2.7.1", "@web3modal/wagmi": "^3.3.2", "next": "13.5.6", "react": "^18", "react-dom": "^18", "viem": "^1.19.3", "wagmi": "^1.4.7" }

How can i fix this bug???

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

No response

Anything else?

No response

[tmm]

Thanks for reporting. This issue is temporarily closed due to lack of information. Please provide a minimal reproducible example and reopen this issue.

[victorvu18]

i fixed this. Add unknownContextCritical = false to webpack.

[MeanBoyCousin]

@tmm I've put together an MRE relating to OPs problem as I am having the same issue. Whilst the answer from @victorvu18 does work, seems like it's just suppressing the actual issue.

Link to MRE.

"dependencies": {
    "next": "14.0.3",
    "react": "^18",
    "react-dom": "^18",
    "viem": "^1.19.5",
    "wagmi": "^1.4.7"
}

It's just a basic Next app with no customisation. Simply yarn install and then run yarn dev. Once you navigate to localhost and load the homepage, you should see the issue in the terminal. For additional reference, I am seeing the following.

 ⚠ ./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/isows/node_modules/ws/lib/validation.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/@wagmi/core/dist/chunk-TSH6VVF4.js
./node_modules/@wagmi/core/dist/internal/index.js
./node_modules/wagmi/dist/index.js
./src/Wagmi/index.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/isows/node_modules/ws/lib/validation.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/@wagmi/core/dist/chunk-TSH6VVF4.js
./node_modules/@wagmi/core/dist/internal/index.js
./node_modules/wagmi/dist/index.js
./src/Wagmi/index.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/isows/node_modules/ws/lib/validation.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/@wagmi/core/dist/chunk-TSH6VVF4.js
./node_modules/@wagmi/core/dist/index.js
./node_modules/wagmi/dist/index.js
./src/Wagmi/index.tsx

[glitch-txs]

@MeanBoyCousin I'm not seeing wagmi in your MRE, maybe you forgot to push changes?

[glitch-txs]

I created an MRE here as well, the errors are shown on the server console
https://github.com/glitch-txs/wagminext-mre

[MeanBoyCousin]

Whoops 🤦 Have pushed!

[ccxdev]

Hello, @tmm !

Added repro links

Also adding one more repro link

https://stackblitz.com/edit/stackblitz-starters-xn5ytm?description=The%20React%20framework%20for%20production&file=package.json&title=Next.js%20Starter

[gonghaibo]

const nextConfig = {
webpack: config => {
config.resolve.fallback = { fs: false, net: false, tls: false };
config.externals.push('pino-pretty', 'lokijs', 'encoding');
config.module.unknownContextCritical = false;
return config;
},
};

module.exports = nextConfig;

---

Complete solution.

[ccxdev]

Hello @gonghaibo!

Thanks, but it's not a solution, seems like workaround.

I think it should be fixed.

[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.