The right way to import `@walletconnect/[email protected]` in React Native

[jasonzhouu]

Describe the bug throw error when import '@walletconnect/client'

SDK Version (if relevant)

• Client: React Native
• Version: 2.0.0-beta.26

To Reproduce

import AsyncStorage from "@react-native-async-storage/async-storage";
import WalletConnectClient from '@walletconnect/client';

export let walletConnectClient: WalletConnectClient

export async function createWalletConnectClient() {
  walletConnectClient = await WalletConnectClient.init({
    controller: true,
    projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
    relayUrl: process.env.NEXT_PUBLIC_RELAY_URL ?? 'wss://relay.walletconnect.com',
    metadata: {
      name: 'React Wallet',
      description: 'React Wallet for WalletConnect',
      url: 'https://walletconnect.com/',
      icons: ['https://avatars.githubusercontent.com/u/37784886']
    },
    storageOptions: {
      asyncStorage: AsyncStorage,
    },
  })
}

will report error: super expression must either be null or a function

Screenshots

Smartphone (please complete the following information):

• Device: XiaoMi 11
• OS: Android 12

how to fix

change import WalletConnectClient from '@walletconnect/client'; to import WalletConnectClient from '@walletconnect/client/dist/umd/index.min';

[daniyalayyaz]

Describe the bug throw error when import '@walletconnect/client'

can you share me your walletconnectclient code of react native .I dont know how to make a connection and documention is not good

[jasonzhouu]

@daniyalayyaz I have not implemented it yet. The beta version in React Native is still in development. https://github.com/WalletConnect/walletconnect-monorepo/issues/987#issuecomment-1128479379

[raj-khare]

@jasonzhouu im still getting the following error after using @walletconnect/client/dist/umd/index.min.

Super expression must either be null or a function
at http://192.168.1.6:8081/index.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:259016:27 in <unknown>
at http://192.168.1.6:8081/index.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:259464:3 in <unknown>
at node_modules/metro-runtime/src/polyfills/require.js:351:11 in loadModuleImplementation
at node_modules/@walletconnect/client/dist/esm/index.js:1:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:351:11 in loadModuleImplementation
at src/utils/walletconnect.ts:1:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:351:11 in loadModuleImplementation
at src/components/HomeScreen.tsx:31:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:351:11 in loadModuleImplementation
at App.js:5:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:351:11 in loadModuleImplementation
at index.js:9:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:351:11 in loadModuleImplementation
at node_modules/metro-runtime/src/polyfills/require.js:202:44 in guardedLoadModule
at http://192.168.1.6:8081/index.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:328934:3 in global code

after digging further it seems following modules fails to load. any idea to fix it?

Object {
  "dependencyMap": Array [
    1,
    72,
    212,
    213,
  ],
  "factory": [Function anonymous],
  "hasError": false,
  "hot": Object {
    "_acceptCallback": null,
    "_didAccept": false,
    "_disposeCallback": null,
    "accept": [Function accept],
    "dispose": [Function dispose],
  },
  "importedAll": Object {},
  "importedDefault": Object {},
  "isInitialized": false,
  "publicModule": Object {
    "exports": Object {},
  },
  "verboseName": "node_modules/react-native/Libraries/Utilities/LoadingView.ios.js",
}
Object {
  "dependencyMap": Array [
    1,
    13,
    14,
    18,
    20,
    17,
    187,
    169,
    171,
  ],
  "factory": [Function anonymous],
  "hasError": false,
  "hot": Object {
    "_acceptCallback": null,
    "_didAccept": false,
    "_disposeCallback": null,
    "accept": [Function accept],
    "dispose": [Function dispose],
  },
  "importedAll": Object {},
  "importedDefault": Object {},
  "isInitialized": false,
  "publicModule": Object {
    "exports": Object {},
  },
  "verboseName": "node_modules/react-native/Libraries/Blob/FileReader.js",
}

Object {
  "dependencyMap": Array [],
  "factory": [Function anonymous],
  "hasError": false,
  "hot": Object {
    "_acceptCallback": null,
    "_didAccept": false,
    "_disposeCallback": null,
    "accept": [Function accept],
    "dispose": [Function dispose],
  },
  "importedAll": Object {},
  "importedDefault": Object {},
  "isInitialized": false,
  "publicModule": Object {
    "exports": Object {},
  },
  "verboseName": "node_modules/react-native/Libraries/Utilities/differ/deepDiffer.js",
}

[xzilja]

@jasonzhouu @raj-khare @daniyalayyaz We've recently released beta.100 with some api changes (now beta.101) and following migration / temporary docs gist https://gist.github.com/pedrouid/1a36c6a8776e49453838578ec84715e6

Perhaps it will help you with getting started. There is also guide for additional react-native steps here https://docs.walletconnect.com/2.0/javascript/guides/react-native

We are slowly wrapping up work on v2 and are getting close to the point where we'll update and finish documentation so it is all consistent and easy to understand. Ty for your patience 🙏

[nomanaliakram321]

@jasonzhouu @raj-khare @daniyalayyaz We've recently released beta.100 with some api changes (now beta.101) and following migration / temporary docs gist https://gist.github.com/pedrouid/1a36c6a8776e49453838578ec84715e6

Perhaps it will help you with getting started. There is also guide for additional react-native steps here https://docs.walletconnect.com/2.0/javascript/guides/react-native

We are slowly wrapping up work on v2 and are getting close to the point where we'll update and finish documentation so it is all consistent and easy to understand. Ty for your patience 🙏

Any update in wallet connect version 2.0 beta ? how i can implement in react native?

[chadyj]

Any update in wallet connect version 2.0 beta ?

The beta is over! Check out our blog post https://medium.com/walletconnect/calling-all-devs-the-walletconnect-v2-0-sign-beta-is-over-d7bb786cdd93

[finessevanes]

@jasonzhouu are you still having issues when trying to use React Native?

[malikKartik]

I am still getting this error, I am using @walletconnect/react-native-dapp (v1.8.0) in my project and when I am adding @walletconnect/client to my webpack config file I am getting this error.

[roadmanfong]

I also got this error, do you have any plan to fix this issue in react native ?

[finessevanes]

@roadmanfong what version are you using?

@malikKartik at this point, if you're using v1 it's unlikely it will be fixed. I would recommend upgrading to v2 since v1 will be shutdown soon.

docs: https://github.com/WalletConnect/react-native-examples

[roadmanfong]

I tried to keep wallet connect v1 and v2 together, so there's v1 @walletconnect/client.

  "@walletconnect/client": "1.8.0",
  "@walletconnect/core": "^2.4.3",
  "@walletconnect/react-native-compat": "^2.4.3",
  "@walletconnect/types": "1.8.0",
  "@walletconnect/utils": "^2.4.0",
  "@walletconnect/web3wallet": "^1.1.1",

[roadmanfong]

here's my error, kind of different from original post. it happened in @walletconnect/[email protected]/dist/index.cjs.js

[roadmanfong]

It turns out it's monorepo and walletconnect v1, v2 coexist issue.

https://docs.expo.dev/guides/monorepos/#modify-the-metro-config

In this article, it suggest this in metro.config.js

config.resolver.disableHierarchicalLookup = true;

It will mess up, because v1, v2 have some package with same name but different version.

I added resolveRequest in metro.config.js, it works now.

config.resolver.resolveRequest = (context, moduleName, platform) => {
  if (moduleName.startsWith('@walletconnect/types')) {
    if (
      context.originModulePath.startsWith(path.resolve(workspaceRootNodeModules, '@walletconnect/core')) ||
      context.originModulePath.startsWith(path.resolve(workspaceRootNodeModules, '@walletconnect/sign-client'))
    ) {
      return context.resolveRequest(
        {
          ...context,
          disableHierarchicalLookup: false,
        },
        moduleName,
        platform,
      );
    }
  }
  return context.resolveRequest(context, moduleName, platform);
};

[glitch-txs]

I’m closing this issue because it has been inactive for a few weeks. Please reopen if you still encounter this issue with the latest version :slightly_smiling_face: