MetaMask / metamask-sdk

The simplest yet most secure way to connect your blockchain-based applications to millions of MetaMask Wallet users.
https://metamask.io/sdk/
Other
172 stars 106 forks source link

[Bug]: initializeMobileProvider → Ethereum init() → TypeError privateMap.get is not a function #816

Closed judeProground closed 4 days ago

judeProground commented 5 months ago

SDK

React-Native

Provide environment information

react-native 0.72

MetaMask SDK Version

0.18.5

MetaMask Mobile app Version

not important

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Hi, I'm trying to integrate @metamask/sdk-react to react-native app.

I'm following examples below

Since the official documentation and examples mentioned above are not quite updated, I need some advice. I lost track at Ethereum.init and have no idea what 'privateMap' refers to. Here are the logs below.

 DEBUG  MM_SDK [MetaMaskSDK: constructor()]: begin. +0ms
 DEBUG  MM_SDK [MetaMaskSDK: performSDKInitialization()] options +10ms {"checkInstallationImmediately": false, "communicationLayerPreference": "socket", "communicationServerUrl": "https://metamask-sdk-socket.metafi.codefi.network/", "dappMetadata": {"name": "SuperWalk"}, "enableAnalytics": true, "i18nOptions": {"enabled": true}, "injectProvider": true, "logging": {"developerMode": true, "plaintext": true}, "openDeeplink": [Function openDeeplink], "readonlyRPCMap": {"0x2019": "https://public-en-cypress.klaytn.net/", "0x38": "https://bsc-dataseed.binance.org/", "0x3e9": "https://public-en-baobab.klaytn.net/", "0x61": "https://data-seed-prebsc-1-s1.binance.org:8545/"}, "shouldShimWeb3": true, "storage": {"enabled": true, "storageManager": {"debug": false}}, "timer": {"callbacks": {}, "uniqueId": 0}, "useDeeplink": true}
 DEBUG  MM_SDK [MetaMaskSDK: initializeMetaMaskSDK()] already initializing +42ms
 LOG  {"checkInstallationImmediately": false, "debug": true, "socketServer": "https://metamask-sdk-socket.metafi.codefi.network/", "useDeeplink": false}
 DEBUG  MM_SDK-React [MetaMaskProviderClient] sdk already initialized +0ms
 DEBUG  MM_SDK [WakeLockManager: setDebug()] activate debug mode +110ms
 DEBUG  MM_SDK [MetaMaskSDK: setupReadOnlyRPCProviders()] Setting up Readonly RPC Providers +11ms {"0x2019": "https://public-en-cypress.klaytn.net/", "0x38": "https://bsc-dataseed.binance.org/", "0x3e9": "https://public-en-baobab.klaytn.net/", "0x61": "https://data-seed-prebsc-1-s1.binance.org:8545/"}
 DEBUG  MM_SDK [RemoteConnection: initializeConnector()] initialize connector +7ms
 DEBUG  MM_SDK [RemoteConnection: initializeConnector()] reset background timer +119ms {"callbacks": {}, "uniqueId": 0}
 DEBUG  MM_SDK [initializeMobileProvider] cachedAccountAddress: null, cachedChainId: null +14ms
 DEBUG  MM_SDK [Ethereum: init()] Initializing Ethereum service +1ms
 ERROR  [TypeError: privateMap.get is not a function (it is undefined)]
 ERROR  [MetaMaskSDK: constructor()] error during initialization [TypeError: privateMap.get is not a function (it is undefined)]

Expected Behavior

SDK Init

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

No response

To Reproduce

import React, { PropsWithChildren } from 'react';
import { Linking, LogBox } from 'react-native';
import BackgroundTimer from 'react-native-background-timer';
import { MetaMaskProvider, SDKConfigProvider, useSDKConfig } from '@metamask/sdk-react';
import ENV from 'environment';
import MMDebugStatus from 'src/components/Debug/MMDebugStatus';
import { StorageManagerRN } from 'src/utils/StorageManagerRN';

LogBox.ignoreLogs([
  'Possible Unhandled Promise Rejection',
  'Message ignored because invalid key exchange status',
  "MetaMask: 'ethereum._metamask' exposes",
  '`new NativeEventEmitter()` was called with a non-null',
]); // Ignore log notification by message

// TODO how to properly make sure we only try to open link when the app is active?
// current problem is that sdk declaration is outside of the react scope so I cannot directly verify the state
// hence usage of a global variable.
const canOpenLink = true;

const WithSDKConfig = ({ children }: { children: React.ReactNode }) => {
  const { socketServer, useDeeplink, debug, checkInstallationImmediately } = useSDKConfig();

  return (
    <MetaMaskProvider
      debug={debug}
      sdkOptions={{
        communicationServerUrl: socketServer,
        // TODO: change to enableAnalytics when updating the SDK version
        enableAnalytics: true,
        // infuraAPIKey,
        // readonlyRPCMap: {
        //   '0x38': 'https://bsc-dataseed.binance.org/',
        //   '0x2019': 'https://public-en-cypress.klaytn.net/',
        //   '0x61': 'https://data-seed-prebsc-1-s1.binance.org:8545/',
        //   '0x3e9': 'https://public-en-baobab.klaytn.net/',
        // },
        logging: {
          developerMode: true,
          plaintext: true,
        },
        openDeeplink: (link: string, _target?: string) => {
          console.debug(`App::openDeepLink() ${link}`);
          if (canOpenLink) {
            Linking.openURL(link);
          } else {
            console.debug('useBlockchainProiver::openDeepLink app is not active - skip link', link);
          }
        },
        timer: BackgroundTimer,
        useDeeplink,
        checkInstallationImmediately,
        storage: {
          enabled: true,
          storageManager: new StorageManagerRN(),
        },
        dappMetadata: {
          name: 'k',
        },
        i18nOptions: {
          enabled: true,
        },
      }}
    >
      {children}
    </MetaMaskProvider>
  );
};

const MMProvider = ({ children }: PropsWithChildren) => {
  return (
    // <SDKConfigProvider initialSocketServer={ENV.MM_SDK_SOCKET_SERVER_URL} initialInfuraKey={INFURA_API_KEY}>
    <SDKConfigProvider initialSocketServer={ENV.MM_SDK_SOCKET_SERVER_URL}>
      <WithSDKConfig>
        {children}
        {ENV.APP_ENV !== 'production' && <MMDebugStatus />}
      </WithSDKConfig>
    </SDKConfigProvider>
  );
};

export default MMProvider;
judeProground commented 5 months ago

I discovered that this error is caused by a conflict with the web3modal/wagmi-react-native package, as highlighted in the Sentry stack trace. I disabled the wagmi configuration and web3modal initialization, and then metamask-sdk worked. 스크린샷 2024-04-19 16 09 13

I think I should try wagmi v1 MetaMaskConnector to use both web3modal and metamask-sdk

christopherferreira9 commented 3 months ago

HI @judeProground ! We recently updated the MetaMask connector on Wagmi, can you give it a try with the latest version?

christopherferreira9 commented 3 months ago

Hi @judeProground we're closing this issue for the time being. If you still experience this issue please feel free to give us a ping so that we can reopen.

Mouradif commented 3 months ago

Having a similar issue with the latest version of wagmi connector in a Next.JS app maybe it's a different problem but I landed here after googling "Metamask privateMap.get is not a function"

Here's the error I get on the terminal running next dev (via a pnpm dev script)

web:dev: TypeError: privateMap.get is not a function
web:dev:     at __classPrivateFieldGet (/Users/user/app/node_modules/.pnpm/tslib@1.14.1/node_modules/tslib/tslib.js:250:27)
web:dev:     at Dg.push (/Users/user/app/node_modules/.pnpm/@metamask+sdk@0.26.4_react-dom@18.2.0_react-native@0.74.3_react@18.2.0/node_modules/@metamask/sdk/node_modules/@metamask/json-rpc-engine/dist/JsonRpcEngine.js:85:9)
web:dev:     at forEach (/Users/user/app/node_modules/.pnpm/@metamask+sdk@0.26.4_react-dom@18.2.0_react-native@0.74.3_react@18.2.0/node_modules/@metamask/sdk/node_modules/@metamask/providers/dist/chunk-OGPA5Q76.mjs:62:53)
web:dev:     at Array.forEach (<anonymous>)
web:dev:     at new super (/Users/user/app/node_modules/.pnpm/@metamask+sdk@0.26.4_react-dom@18.2.0_react-native@0.74.3_react@18.2.0/node_modules/@metamask/sdk/node_modules/@metamask/providers/dist/chunk-OGPA5Q76.mjs:62:19)
web:dev:     at new super (/Users/user/app/node_modules/.pnpm/@metamask+sdk@0.26.4_react-dom@18.2.0_react-native@0.74.3_react@18.2.0/node_modules/@metamask/sdk/node_modules/@metamask/providers/dist/chunk-UTROHXPT.mjs:36:5)
web:dev:     at new super (/Users/user/app/node_modules/.pnpm/@metamask+sdk@0.26.4_react-dom@18.2.0_react-native@0.74.3_react@18.2.0/node_modules/@metamask/sdk/node_modules/@metamask/providers/dist/chunk-URMSZO7Z.mjs:46:5)
web:dev:     at new Iw (/Users/user/app/node_modules/.pnpm/@metamask+sdk@0.26.4_react-dom@18.2.0_react-native@0.74.3_react@18.2.0/node_modules/@metamask/sdk/src/provider/SDKProvider.ts:51:5)
web:dev:     at new Py (/Users/user/app/node_modules/.pnpm/@metamask+sdk@0.26.4_react-dom@18.2.0_react-native@0.74.3_react@18.2.0/node_modules/@metamask/sdk/src/services/Ethereum.ts:24:22)
web:dev:     at Function.init (/Users/user/app/node_modules/.pnpm/@metamask+sdk@0.26.4_react-dom@18.2.0_react-native@0.74.3_react@18.2.0/node_modules/@metamask/sdk/src/services/Ethereum.ts:68:21)
web:dev:     at /Users/user/app/node_modules/.pnpm/@metamask+sdk@0.26.4_react-dom@18.2.0_react-native@0.74.3_react@18.2.0/node_modules/@metamask/sdk/src/provider/initializeMobileProvider.ts:101:29
web:dev:     at Generator.next (<anonymous>)
web:dev:     at p (/Users/user/app/node_modules/.pnpm/@metamask+sdk@0.26.4_react-dom@18.2.0_react-native@0.74.3_react@18.2.0/node_modules/@metamask/sdk-communication-layer/dist/node/es/metamask-sdk-communication-layer.js:1:68682)
web:dev: [MetaMaskSDK: constructor()] error during initialization TypeError: privateMap.get is not a function
omridan159 commented 1 month ago

@Mouradif, could you please update to the latest version of the SDK and try again? We’ve updated some internal packages, and we believe this should resolve the issue.

christopherferreira9 commented 4 days ago

Hi all! I'll be closing this issue since there hasn't been activity on it for a while. Please feel free to open it again if it still applies.