[bug]: this.events.off is not a function

[shan-c]

Description

These errors occurs when i open the app for first time. Whenever i encounter this error, and i select a wallet in web3modal, it redirects to that wallet and nothing happens, no connection prompt is shown. If this error is not encountered, everything works fine

Web3Modal SDK version

1.0.1

Output of npx react-native info

System:
  OS: macOS 13.5.2
  CPU: (10) arm64 Apple M1 Pro
  Memory: 88.77 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.17.1
    path: ~/.nvm/versions/node/v18.17.1/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 8.19.4
    path: ~/mobile-app-old/mobile-app/node_modules/.bin/npm
  Watchman:
    version: 2023.03.20.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.12.0
    path: /Users/shanthan/.rvm/gems/ruby-2.7.6/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.0
      - iOS 17.0
      - macOS 14.0
      - tvOS 17.0
      - watchOS 10.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2021.3 AI-213.7172.25.2113.9014738
  Xcode:
    version: 15.0/15A240d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.16.1
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/shanthan/.rvm/rubies/ruby-2.7.6/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: ^18.2.0
  react-native:
    installed: 0.72.8
    wanted: ^0.72.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: false
  newArchEnabled: false

Expo Version (if applies)

No response

Steps to reproduce

Just rendering the gives this error

Snack, code example, screenshot, or link to a repository

const metadata = {
    name: 'xyz',
    description: 'xyz,
    url: 'https://xyz.io',
    icons: ['https://avatars.githubusercontent.com/u/37784886'],
    redirect: {
      native: 'xyz://',
      universal: 'YOUR_APP_UNIVERSAL_LINK.com',
    },
  };

  const chains = [mainnet, polygon, arbitrum];

  const wagmiConfig = defaultWagmiConfig({
    chains,
    projectId,
    metadata,
  });

  // 3. Create modal
  createWeb3Modal({
    projectId,
    chains,
    wagmiConfig,
  });

return (
      <WagmiConfig config={wagmiConfig}>
        {children}
        <Web3Modal />
      </WagmiConfig>
  );

[shan-c]

@ignaciosantise

[glitch-txs]

can you share you peerDeps, this seems to be related to a polyfill overwriting some values

[shan-c]

@glitch-txs Attaching package.json. Please take a look
package.json

[shan-c]

@glitch-txs @ignaciosantise I'm blocked by this issue. Can you please help me ?

[ignaciosantise]

@shan-c can you share a public repository were i can reproduce the issue?

[mihairadulescu]

any updates on this one guys?
It makes your app non responsive and nothing happens, are you sure you dont have destructuring missing somwhere after a rerender ?

[ignaciosantise]

hey @mihairadulescu can you provide a public repository so i can reproduce the error?

Also, did you add any polyfill to your project? It might be the cause of the issue: WalletConnect/walletconnect-monorepo#4064 (comment)

[shan-c]

@ignaciosantise I do not use any external polyfiils. I use babel for my react native app. This is the config

const lazyImports = require('metro-react-native-babel-preset/src/configs/lazy-imports');

module.exports = (api) => {
  api.cache(true);
  return {
    comments: false,
    compact: true,
    presets: [['module:metro-react-native-babel-preset', { useTransformReactJSXExperimental: true }],],
    plugins: [
      'react-native-reanimated/plugin',
      'nativewind/babel',
      '@babel/plugin-transform-flow-strip-types',
      '@babel/plugin-proposal-optional-catch-binding',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-block-scoping',
      [
        '@babel/plugin-proposal-class-properties',
        {
          loose: true,
        },
      ],
      '@babel/plugin-syntax-dynamic-import',
      '@babel/plugin-syntax-export-default-from',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-computed-properties',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-destructuring',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-function-name',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-literals',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-parameters',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-shorthand-properties',
      [
            '@babel/plugin-transform-react-jsx',
            {
                runtime: 'automatic',
            },
        ],
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-regenerator',
      '@babel/plugin-transform-sticky-regex',
      '@babel/plugin-transform-unicode-regex',
      '@babel/plugin-proposal-export-default-from',
      [
        '@babel/plugin-transform-modules-commonjs',
        {
          strict: false,
          strictMode: false, // prevent "use strict" injections
          lazy: (importSpecifier) => lazyImports.has(importSpecifier),
          allowTopLevelThis: true, // dont rewrite global `this` -> `undefined`
        },
      ],
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-classes',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-arrow-functions'
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-spread',
      '@babel/plugin-proposal-object-rest-spread',
      // SUPPORTED BY DEFAULT: [
      // SUPPORTED BY DEFAULT:   '@babel/plugin-transform-template-literals',
      // SUPPORTED BY DEFAULT:   {loose: true}, // dont 'a'.concat('b'), just use 'a'+'b'
      // SUPPORTED BY DEFAULT: ],
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-exponentiation-operator',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-object-assign',
      // SUPPORTED BY DEFAULT: ['@babel/plugin-transform-for-of', {loose: true}],
      // 'metro-react-native-babel-preset/src/transforms/transform-symbol-member',
      '@babel/plugin-transform-react-display-name',
      '@babel/plugin-proposal-optional-chaining',
      '@babel/plugin-proposal-nullish-coalescing-operator',
      [
        '@babel/plugin-transform-runtime',
        {
          helpers: true,
          regenerator: true,
          polyfill: false
        },
      ],
    ],
  };
};

[ignaciosantise]

@shan-c can you provide a public repository so i can reproduce the issue?

You can generate a new project running npx react-native init AwesomeProject and then follow our docs to install the SDK here: https://docs.walletconnect.com/web3modal/react-native/about#installation

So we can check if there's a configuration issue in your project or is something else

[shan-c]

@ignaciosantise I forgot to update here. This issue is fixed for me. I ran through my package.json and found out that if these two packages 'buffer' and 'events' are installed, I encounter this issue. I removed these packages and never seen this error since then. Thanks a lot

[niklasnatter]

Hey everybody, we encountered a similar issue today and summarised how we solved it here: WalletConnect/walletconnect-monorepo#4064 (comment)