React-Native Metamask SDK

DaddyGG · April 13, 2023, 8:37am

Hi everyone,

I hope this time i will have an answer to my problem !

I am developping a mobile APP in react native. I set up my project as required and try to import the MetaMask SDK to be able to connect my APP to the MetaMask mobile app of the user. I am following this guide in the API doc

The problem is as soon as i place this code which is in the doc to connect to MetaMask i got an error

const MMSDK = new MetaMaskSDK({

openDeeplink: (link) => {
Linking.openURL(link); // Use React Native Linking method or another way of opening deeplinks.
},
timer: BackgroundTimer, // To keep the dapp alive once it goes to background.
dappMetadata: {
name: ‘My dapp’, // The name of your dapp.
url: ‘mydapp/’, // The URL of your website.
},
});

The error i have is : Error: While trying to resolve module crypto from file C:\Users\USER\Desktop\CryptTank\MetamaskConnect\node_modules@MetaMask\sdk\dist\react-native\es\MetaMask-sdk.js, the package C:\Users\USER\Desktop\CryptTank\MetamaskConnect\node_modules\crypto\package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (C:\Users\USER\Desktop\CryptTank\MetamaskConnect\node_modules\crypto\index.js. Indeed, none of these files exist:

Could someone help me to understand why i have this error and how i can solve this?

Thank you very much for your help and have a great day.

snwlprd.eth · April 13, 2023, 5:46pm

Hello @DaddyGG !
Welcome to MetaMask community !

This is not a problem with MetaMask, but with the React Native build.
From what I found from open sources, it may be useful to you:

MetroJS bundler default not compile typescript .ts and .tsx extension files. We need tell MetroJS bundler to compile .ts and .tsx files i solved this error by edit metro.config.js file in root project folder by following.

Added cjx and json extensions to below snippet

All extensions listed below not required it’s depend on what language you choose javascript or typescript, and your dependencies

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs', 'json'] //add here
  },
};

DaddyGG · April 13, 2023, 6:03pm

Hello again and thank for the reply !

I just did what you told me but it seems i still have the exact same error.

Could it become from somwhere else?

Thank you fo your help and have a great day.

DaddyGG · April 13, 2023, 6:10pm

@snwlprd.eth

Just to let you know. I followed the React NAtive CLI quickstart in the official doc of react native.

After this i started to follow the doc of MetaMask API How to → Use MetaMask SDF → React Native.

So now you what exactly what looks like my project

snwlprd.eth · April 13, 2023, 8:33pm

@DaddyGG

Got it
Try deploying React Native examples from the official MetaMask documentation on github.

DaddyGG · April 14, 2023, 5:37am

@snwlprd.eth

Thank you very much I didn’t know there was an example in the GitHub. So I just need to download the repo right and make it run?
Is it up to date?

I will try it today and let you know if everything is ok

DaddyGG · April 14, 2023, 7:46am

Hi again @snwlprd.eth !

I just downloaded the code from the Github you provided to me.

You can find what the project looks like here.

After the installation, i ran NPM install to install all modules and started to debug. Then i got the error that the ethers module is missing so i run npm install ethers and it solved this problem.

However, now i got a new problem where i can’t find any solution on the web, maybe you could help me on this one!

Error: Expected file to be absolute path but got node_modules@babel\runtime\helpers\interopRequireDefault.js
at new Module (C:\Users\Abade\Desktop\CryptTank\MetaMask-sdk-main\MetaMask-sdk-main\packages\examples\reactNativeTSApp\node_modules\metro\src\node-haste\Module.js:19:13)

Could it be because i did something wrong while installing or i forgtor anything?

Thank you for your help and have a great day

snwlprd.eth · April 14, 2023, 5:58pm

@DaddyGG

After which command do you see this error? npm start ? (“react-native start” in scripts)

I downloaded the source code from here:

after
npm i && npm start
I didn’t get any errors.

I’m sure it’s a matter of setting up your environment.
What is your Development OS and Target OS ?
You may need to update Node, you can do it via nvm.

DaddyGG · April 14, 2023, 6:26pm

Thanks for the reply @snwlprd.eth !

For me i am developping on Windows 10 and my Node version is v18.15.0
I am targeting android OS.

Should i use another version?

I installed the project you mentioned. I ran npm i and then i start the project using: npm run android

The first error i got when i ran npm run android :code: ‘ERR_OSSL_EVP_UNSUPPORTED’ and i can solve this by adding this → ```
SET NODE_OPTIONS=–openssl-legacy-provider’ in the package.json file

Then i try to run again but the crypto error appear again so i put your fix in metro.config.js but it doesn’t change anything i still got this error.

I am using an emulator with android studio to make it run on Android and this is the device i use in case it comes from here

Thank you for your help

DaddyGG · April 14, 2023, 6:39pm

@snwlprd.eth Not that after your reply i made a fresh start and downloaded the same project as you and not the one from github. (the one in the doc)

benjaminkang · April 20, 2023, 11:36pm

What are you supposed to do after this point? I am at the same exact screen where it says Welcome to Metro! but nothing happens…When I press ‘R’ to reload the app, it says that it is not connected to anything.

benjaminkang · April 20, 2023, 11:49pm

I’ve also tried starting the application with yarn ios and that causes an error since the default is set to iPhone 11. I’ve updated that to iPhone 14 and I see this error:

Failed to build iOS project. We ran “xcodebuild” command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening reactNativeApp.xcworkspace.

andreahaku · April 26, 2023, 8:08am

Hi,
we are updating the documentation and the examples with the latest versions and should be published later today or max tomorrow.

Please refer to the examples that you’ll find here: https://github.com/MetaMask/metamask-sdk/tree/main/packages/examples and I’d also suggest to open issues related to metamask-sdk in the above linked repo.

Thanks a lot!

MenITrust · April 28, 2023, 8:45am

sounds like a frustrating issue… have you tried building the app with Xcode.app as suggested in the error message? It might give you more detailed logs on what went wrong during the build process, plus have you checked that all the necessary dependencies are installed and up-to-date… errors can occur if something is missing or out of date

system · May 28, 2023, 8:45am

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.