[Bug] React native: Error: Unable to resolve module node:crypto from ../node_modules/@metamask/sdk/dist/react-native/es/metamask-sdk.js

[quannguyenminhthatera]

SDK

React-Native

Provide environment information

{
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"postinstall": "npx patch-package && rn-nodeify --install 'crypto,process,stream,events' --hack"
},
"dependencies": {
"@ethersproject/shims": "^5.7.0",
"@metamask/sdk": "^0.20.5",
"@toruslabs/eccrypto": "^4.0.0",
"@toruslabs/react-native-web-browser": "^1.1.0",
"@web3auth/base": "^8.6.2",
"@web3auth/ethereum-provider": "^8.6.2",
"@web3auth/react-native-sdk": "^5.1.0",
"buffer": "^6.0.3",
"crypto": "^1.0.1",
"crypto-browserify": "^3.12.0",
"empty-module": "^0.0.2",
"ethers": "^6.13.0",
"events": "^3.3.0",
"process": "^0.11.10",
"react": "18.2.0",
"react-native": "0.74.1",
"react-native-background-timer": "^2.4.1",
"react-native-crypto": "^2.2.0",
"react-native-encrypted-storage": "^4.0.3",
"react-native-gesture-handler": "^2.16.0",
"react-native-get-random-values": "^1.11.0",
"react-native-randombytes": "^3.6.1",
"react-native-svg": "^15.3.0",
"readable-stream": "^4.5.2",
"stream": "^0.0.2",
"stream-browserify": "^1.0.0"
},
"devDependencies": {
...
"rn-nodeify": "^10.3.0",
"typescript": "5.1.3"
},
"engines": {
"node": ">=18"
},
"packageManager": "[email protected]",
"react-native": {
"crypto": "react-native-crypto",
"_stream_transform": "readable-stream/transform",
"_stream_readable": "readable-stream/readable",
"_stream_writable": "readable-stream/writable",
"_stream_duplex": "readable-stream/duplex",
"_stream_passthrough": "readable-stream/passthrough",
"stream": "stream-browserify"
},
"browser": {
"_stream_duplex": "readable-stream/duplex",
"_stream_passthrough": "readable-stream/passthrough",
"_stream_readable": "readable-stream/readable",
"_stream_transform": "readable-stream/transform",
"_stream_writable": "readable-stream/writable",
"crypto": "react-native-crypto",
"stream": "stream-browserify"
}
}

MetaMask SDK Version

0.20.5

MetaMask Mobile app Version

5.8.1

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I install as the document but i still got Error: Unable to resolve module node:crypto
https://docs.metamask.io/wallet/how-to/use-sdk/react-native/

Expected Behavior

Have any solution for that?

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

No response

To Reproduce

Just like the document: https://docs.metamask.io/wallet/how-to/use-sdk/react-native

[lochie]

Also seeing same issue with the SDK regardless of framework.

Reproduction link:
Preview: https://vlyjch.csb.app/
Code (via wagmi connector): https://codesandbox.io/p/sandbox/zen-pasteur-vlyjch?file=%2Fsrc%2Fwagmi.js

Steps to reproduce:
Wait 10-15 seconds, error will appear.

[lochie]

Upon further research my issue only appears in the codesandbox, doesn't seem to happen locally.

[quannguyenminhthatera]

@christopherferreira9 @abretonc7s @omridan159 Thank for supporting guys!! Can i ask how is it going?

[christopherferreira9]

Hi @quannguyenminhthatera . I did some checking and it seems to be related to rn-nodify and this is something we're not able to get around for the time being. A better way to enable the crypto API is to use node-libs-react-native which you can refere to our reactNative Example.

[chornesays]

For anyone running across this - the key fix for me was adding the line
"node:crypto": require.resolve("react-native-crypto"),

to my metro.config.js file just like in the reactNative example