Getting Error while using thirdweb provider

[kajlasanamdeep]

Uncaught TypeError: Class extends value undefined is not a constructor or null at ./node_modules/@thirdweb-dev/wallets/node_modules/@walletconnect/logger/dist/index.es.j

[jnsdls]

you may need to polyfill some node dependencies.

To help more effectively here I'd need to know a bit more about your setup, useful information would be:

• node version
• frontend or backend application
• which bundler (if any) is being used (vite, next, webpack)
• any other framerworks

[lukachi]

Hi, any updates here? I have same issue while using @walletconnect/universal-provider & @walletconnect/modal straightfully.

i'm using vite 5.x.x with @esbuild-plugins/node-globals-polyfill, @esbuild-plugins/node-modules-polyfill and vite-plugin-node-polyfills

here is my config

import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
import react from '@vitejs/plugin-react-swc'
import * as fs from 'fs'
import * as path from 'path'
import { visualizer } from 'rollup-plugin-visualizer'
import { defineConfig, loadEnv } from 'vite'
import { checker } from 'vite-plugin-checker'
import { createHtmlPlugin } from 'vite-plugin-html'
import { nodePolyfills } from 'vite-plugin-node-polyfills'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import tsconfigPaths from 'vite-tsconfig-paths'

const appDirectory = fs.realpathSync(process.cwd())
const resolveApp = (relative: string) => path.resolve(appDirectory, relative)
const root = path.resolve(__dirname, resolveApp('src'))

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  // const isProduction = env.VITE_ENVIRONMENT === 'production'
  // const isDevelopment = env.VITE_ENVIRONMENT === 'development'
  const isAnalyze = env.VITE_ENVIRONMENT === 'analyze' || env.VITE_MODE === 'analyze'
  // const buildVersion = env.VITE_APP_BUILD_VERSION

  return {
    ...(env.VITE_PORT
      ? {
          server: {
            port: Number(env.VITE_PORT),
          },
        }
      : {}),
    publicDir: 'static',
    plugins: [
      react(),
      tsconfigPaths(),
      createSvgIconsPlugin({
        iconDirs: [
          path.resolve(process.cwd(), 'src/assets/icons'),
          path.resolve(process.cwd(), 'src/assets/illustrations'),
        ],
        symbolId: '[name]',
      }),
      checker({
        overlay: {
          initialIsOpen: false,
          position: 'br',
        },
        typescript: true,
        eslint: {
          lintCommand: 'eslint "{src,config}/**/*.{jsx,tsx}" --cache --max-warnings=0',
        },
      }),
      createHtmlPlugin({
        minify: true,
        entry: '/src/main.tsx',
        inject: {
          data: {
            host: env.VITE_APP_DOMAIN,
          },
        },
      }),
      ...(isAnalyze
        ? [
            visualizer({
              open: true,
            }),
          ]
        : []),
    ],
    resolve: {
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
      dedupe: ['react', 'lodash'],
      alias: {
        '@': `${root}/`,
        '@config': `${root}/config.ts`,
        '@static': `${root}/../static`,

        '@walletconnect/universal-provider': path.resolve(
          __dirname,
          'node_modules/@walletconnect/universal-provider/dist/index.es.js',
        ),

        '@walletconnect/modal': path.resolve(
          __dirname,
          'node_modules/@walletconnect/modal/dist/index.js',
        ),
      },
    },
    optimizeDeps: {
      esbuildOptions: {
        define: {
          global: 'globalThis',
        },
      },
      // Enable esbuild polyfill plugins
      plugins: [
        NodeGlobalsPolyfillPlugin({
          process: true,
          buffer: true,
        }),
        NodeModulesPolyfillPlugin(),
      ],
    },
    build: {
      target: 'esnext',
      rollupOptions: {
        plugins: [
          // Enable rollup polyfills plugin
          // used during production bundling
          nodePolyfills(),
        ],

        output: {
          sourcemap: true,

          manualChunks: {
            '@walletconnect/universal-provider': ['@walletconnect/universal-provider'],
            '@walletconnect/modal': ['@walletconnect/modal'],
          },
        },
      },
    },
  }
})

and error occurs here:

P.S. aliases and output.manualChunks is not necessary here, i just put it there to get more details in dev tools within sourcemap

[jnsdls]

@lukachi thanks for the added information, this is helpful. Even more helpful would be if you could provide a minimal reproduction case, meaning the smallest possible setup that causes the issue to happen. Likely in this case a pretty minimal vite config that breaks.

I will also try to reproduce this with a minimal setup and see if I can nail down where this problem happens

[lukachi]

Hi @jnsdls

you could just use any vite js project with ethers@^5.7.2, and simply integrate @walletconnect/universal-provider & @walletconnect/modal

I think the issue is within @walletconnect/logger, because i've found similar issues in their repo

To PnP(quick start) i'm using this template https://github.com/distributed-lab/react-mui-template/

and for the wallet connect i'm using latest stable versions, also, by searching through this error, i've found, that in ethers js providers aka @ethersproject/provider, the JsonRpcProvider has the same error. So i start to think, that i haven't enough polyfills thou

UPD: JsonRpcProvider hadn't issues, i've made a mistake with circular deps in my code

[jnsdls]

hi @lukachi please take a look at this basic reproduction, I am able to fully use wallet connect etc to connect the wallet etc and do not see any issues: https://github.com/jnsdls/vite-repro-v4

• based on the official vite5 + typescript + react template
• added @thirdweb-dev/react and ethers@5 as dependencies
• added the <ThirdwebProvider> and <ConnectWallet> components

[lukachi]

Hi @jnsdls , sorry for late answer

I'm not sure, but looks like walletconnect team has solved issue with Class extends ... error, and also build issue

https://github.com/WalletConnect/walletconnect-utils/pull/167

and since @thirdweb-dev/react uses fixed package, it should be fine now

https://github.com/thirdweb-dev/js/blob/main/packages/thirdweb/package.json#L156

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.