React Native SDK broken. Unable to resolve "thirdweb/pay" from "node_modules/@thirdweb-dev/sdk/dist/thirdweb-dev-sdk.cjs.dev.js"

[jrhe]

If I try installing adding react-native sdk, either in a bare react-native project or in an expo project I get the following error. The error happens as soon as you add ThirdWebProvider component to your app.

ERROR  [Error: undefined Unable to resolve module thirdweb/pay from /Users/jon/repos/github.com/jrhe/thirdweb_bare_react_native_test/node_modules/@thirdweb-dev/sdk/dist/thirdweb-dev-sdk.cjs.prod.js: thirdweb/pay could not be found within the project or in these directories:
  node_modules/@thirdweb-dev/sdk/node_modules
  node_modules
  111 | require('uuid');
  112 | require('thirdweb');
> 113 | require('thirdweb/pay');
      |          ^
  114 | require('thirdweb/utils');
  115 | require('fast-deep-equal');
  116 | require('./marketplace-bc46f8c3.cjs.prod.js');]

There are also other users on discord having this issue: https://discord.com/channels/834227967404146718/1229386961018425444

I have tried different versions of expo, thirdweb's packages, and react-native without luck.

[jnsdls]

hi @jrhe we are working on this one, in the meantime you should be able to solve this by temporarily pinning @thirdweb-dev/react-native to version 0.73.1

[web3rev]

Also running into the same issue here. Looking forward for it to be resolved soon :+1:

[minhthuong031103]

Hi @jnsdls, I have tried to downgrade to older version but i don't know why it still has the same issue.

[jnsdls]

Hi @jnsdls, I have tried to downgrade to older version but i don't know why it still has the same issue.

can you try deleting your node_modules and reinstalling? most likely you have ended up with a cached dependency of some sort

---

We're targeting a minimal version of the react-native overhaul (first version) by end of this week or early next week. It will likely come with less pre-configured wallet support out of the box initially (since the wallet libraries are (mostly) the things that force us into bad DX (having to eject out of expo, installing tens of polyfills etc)

[johnernest02-EYGDS]

hi @jrhe we are working on this one, in the meantime you should be able to solve this by temporarily pinning @thirdweb-dev/react-native to version 0.73.1

@thirdweb-dev/react-native@0.73.1 does not exist. I did try 0.7.31 but it still has the same issue. Or I may have not cleaned, deleted builds and stuff enough? Though I did verify that is the package being used

[minhthuong031103]

@thirdweb-dev/react-native@0.73.1 does not exist. I did try 0.7.31 but it still has the same issue. Or I may have not cleaned, deleted builds and stuff enough? Though I did verify that is the package being used

Yeah I also think there maybe some mistake here, I have tried 0.7.31 -> 0.5.xx but it still has the same error, also tried to create a new React Native Project form scratch too but still the same.

[johnernest02-EYGDS]

I will be trying a few more versions and try to track it down

[avantmarketing1]

I reverted to 0.7.31 and the issue went away:

"@thirdweb-dev/react-native": "^0.7.31", "@thirdweb-dev/react-native-compat": "^0.7.31",

Maybe delete the cache and rebuild.

I've had a lot of issues with the React Native SDK.

I will probably put my mobile app on hold until the overhaul is available.

The v5 React SDK is so much better.

[mbalazy]

While waiting for the fix i tried this (little hacky) solution:

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config')
const extraNodeModules = require('node-libs-browser')

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  resolver: {
    extraNodeModules,
    resolveRequest: (ctx, moduleName, platform) => {
      if (moduleName.startsWith('thirdweb')) {
        return {
          filePath: `${__dirname}/node_modules/thirdweb/dist/esm/`,
          type: 'sourceFile',
        }
      }

      // Optionally, chain to the standard Metro resolver.
      return ctx.resolveRequest(ctx, moduleName, platform)
    },
  },
}

module.exports = mergeConfig(getDefaultConfig(__dirname), config)

unfortunately, I got another error Invariant Violation: Unexpectedly escaped traversal but maybe it's just because my stack/setup, you can try it on your setups guys and wait till official fix.

[minhthuong031103]

unfortunately, I got another error Invariant Violation: Unexpectedly escaped traversal but maybe it's just because my stack/setup, you can try it on your setups guys and wait till official fix.

I have tried your method but also get the error like you, my project is new set up, sadly right now i cant find any way to run thirdweb in my react native project with any version

[johnernest02-EYGDS]

I have added the react-native-compat library as well, but then it looked for different other packages that I added. At the end of it, it couldn't find the "Button" component from react-native itself.

[theweb3kid]

hey, was anyone able to find any resolution to this?

[web3rev]

Don't think so @theweb3kid . Until this bug is resolved, there doesn't seem to be any way to make thirdweb work with React Native.

[Abdullah098765]

Hay Guys are you still facing this issue if you got it please share

[web3rev]

same issue here. Still waiting for fix. Thanks.

[avantmarketing1]

We're targeting a minimal version of the react-native overhaul (first version) by end of this week or early next week. It will likely come with less pre-configured wallet support out of the box initially (since the wallet libraries are (mostly) the things that force us into bad DX (having to eject out of expo, installing tens of polyfills etc)

Is there any update on this? I only need inApp wallet and smart wallet support.

[joaquim-verges]

we released a patch 0.8.0 of the @thirdweb-dev/react-native package which should resolve this issue - can you all confirm?

In the meantime, we're working on a completely revamped react native package based on the v5 typescript/react web SDK, will be more performant and much lighter than the current one - stay tuned for updates!

[ludwig-g-w]

Still not working for me unfortunately, I removed node_modules and did a metro reset of the cache. Latest working version for me is 0.7.21

[avantmarketing1]

Still getting the same error. I can fix it by removing all references to 'thirdweb', 'thirdweb/pay' and 'thirdweb/utils'. And removing all the functions associated with 'getBuyWithCrypto'.

[minhthuong031103]

Still getting the error

[jrhe]

Ended up switching to privy as although I got it running after a load of time and fiddling, I then ran into further errors.

[joaquim-verges]

hey all, we've been hard at work making v5 work in react native projects.

We've got it mostly working, just working on docs now and putting in the last finishing touches.

will post the docs links here as soon as they're up

[theweb3kid]

Kudos for the hard work, team! Let us know if you need any help with testing. We're excited to integrate as soon as possible!

[joaquim-verges]

Latest release is out V5.23.0 now works with react native with the additional @thirdweb-dev/react-native-adapter and a few other dependencies.

Appart from installation, everything works the same as on the web with the same imports.

Docs: https://portal.thirdweb.com/typescript/v5/react-native

Demo repo: https://github.com/thirdweb-example/expo-starter

Let us know what you think!

[avantmarketing1]

Thanks for the update.

My react native app uses aws-amplify@6.0.20

I'm getting this error installing thirdweb: Conflicting peer dependency: aws-amplify@5.3.18

Is it possible to use thirdweb with the latest version of amplify?

[avantmarketing1]

Also getting this error when building on android: Cannot locate tasks that match ':coinbase-wallet-mobile-sdk:assembleDebug' as project 'coinbase-wallet-mobile-sdk' not found in root project.

[joaquim-verges]

Thanks for the update.

My react native app uses aws-amplify@6.0.20

I'm getting this error installing thirdweb: Conflicting peer dependency: aws-amplify@5.3.18

Is it possible to use thirdweb with the latest version of amplify?

It's on our todo lost to upgrade to v6, but it's a hard dependency of react-native-adapter so it shouldn't cause issues? What error do you see?

[joaquim-verges]

Also getting this error when building on android: Cannot locate tasks that match ':coinbase-wallet-mobile-sdk:assembleDebug' as project 'coinbase-wallet-mobile-sdk' not found in root project.

The V5 SDK does not have/use Coinbase wallet SDK yet. Might need to remove it from your project

[avantmarketing1]

I managed to get the App to build by converting my React Native CLI project to an Expo project.

I followed the expo-starter example to create a custom wallet connect button, but I'm receiving these errors when I click the inApp sign in buttons:

ERROR TypeError: Cannot read property 'loginWith' of undefined, js engine: hermes ERROR [TypeError: Cannot read property 'InAppNativeConnector' of undefined]

The InApp buttons show a continuous loading state and fail to connect. The MetaMask button successfully connects but still shows the errors.

[ludwig-g-w]

Latest release is out V5.23.0 now works with react native with the additional @thirdweb-dev/react-native-adapter and a few other dependencies.

Appart from installation, everything works the same as on the web with the same imports.

Docs: https://portal.thirdweb.com/typescript/v5/react-native

Demo repo: https://github.com/thirdweb-example/expo-starter

Let us know what you think!

Thanks for the update, the demo app works well for me except for web. Will that be fixed?

[joe-pellegrino]

The fix for this is to just install thirdweb 5. You don't have to use it since some modules aren't supported yet, but just install it to resolve the requirements.

npm install thirdweb

[joaquim-verges]

Closing this issue.

Everyone should migrate to the latest thirdweb V5 SDK for react native moving forward to get support and updates.

If you run into any issue with thirdweb SDK V5 on react native feel free to open a new issue!