connectorFn is not a function

oleksandrtarapata commented 1 month ago

Check existing issues

[X] I checked there isn't already an issue for the bug I encountered.

Describe the bug

Hello. I'm building an application based on web3auth and wagmi using nextjs 14.2.3 (app router). I followed SSR guide and here is mine wagmi config:

import { defaultChain } from '@/constants'
import { web3AuthConnector } from '@/providers'
import { createPublicClient, Transport } from 'viem'
import {
  WagmiProvider as WagmiDefaultProvider,
  http,
  createConfig,
  createStorage,
  cookieStorage,
  State,
} from 'wagmi'
import { PropsWithChildren } from 'react'

export const config = createConfig({
  chains: [defaultChain],
  transports: {
    [defaultChain.id]: http(),
  } as Record<8453 | 84532, Transport>,
  ssr: true,
  storage: createStorage({
    storage: cookieStorage,
  }),
  connectors: [web3AuthConnector],
})

export const publicClient = createPublicClient({
  chain: defaultChain,
  transport: http(),
})

type WagmiProviderProps = {
  wagmiInitialState?: State
}

export const WagmiProvider = ({
  children,
  wagmiInitialState,
}: PropsWithChildren<WagmiProviderProps>) => (
  <WagmiDefaultProvider reconnectOnMount={true} config={config} initialState={wagmiInitialState}>
    {children}
  </WagmiDefaultProvider>
)

Initial state comes from RootLayout and also configured as in guide.

import { Providers } from '@/app/providers'
import { Metadata } from 'next'
import { PropsWithChildren } from 'react'
import { cookieToInitialState } from 'wagmi'
import { headers } from 'next/headers'
import { config } from '@/providers'

export const metadata: Metadata = {
  title: 'title',
  icons: [{ url: '/assets/images/logo.svg' }],
  viewport: {
    initialScale: 1,
    maximumScale: 1,
    userScalable: false,
  },
}

const RootLayout = ({ children }: PropsWithChildren) => {
  const wagmiInitialState = cookieToInitialState(config, headers().get('cookie'))
  return (
    <html lang='en'>
      <body>
        <Providers wagmiInitialState={wagmiInitialState}>
          {children}
        </Providers>
      </body>
    </html>
  )
}

And here is also Web3Auth configuration file

'use client'
import { Web3AuthConnector } from '@web3auth/web3auth-wagmi-connector'
import { Web3Auth } from '@web3auth/modal'
import { LOGIN_MODAL_EVENTS } from '@web3auth/ui'
import { CHAIN_NAMESPACES, CustomChainConfig, IProvider, WEB3AUTH_NETWORK } from '@web3auth/base'
import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider'
import { defaultChain } from '@/constants'
import {
  PropsWithChildren,
  createContext,
  useCallback,
  useContext,
  useEffect,
  useState,
} from 'react'
import { useAccount as useWagmi } from 'wagmi'
import { sleep } from '@etherspot/prime-sdk/dist/sdk/common'
import { OpenEvent, useAmplitude } from '@/services'
import { MetamaskAdapter } from '@web3auth/metamask-adapter'
import { CoinbaseAdapter } from '@web3auth/coinbase-adapter'
import {
  getWalletConnectV2Settings,
  WalletConnectV2Adapter,
} from '@web3auth/wallet-connect-v2-adapter'
import { WalletConnectModal } from '@walletconnect/modal'

const chainConfig: CustomChainConfig = {
  ...defaultChainConfig
}

const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } })

export const web3Auth = new Web3Auth({
  ...web3AuthSettings
})

/**
 * METAMASK
 */
const metamaskAdapter = new MetamaskAdapter({
  clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string,
  sessionTime: 3600 * 3,
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
})
web3Auth.configureAdapter(metamaskAdapter)

/**
 * COINBASE
 */
const coinbaseAdapter = new CoinbaseAdapter({
  clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string,
  sessionTime: 3600 * 3,
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
})
web3Auth.configureAdapter(coinbaseAdapter)

/**
 * WALLET CONNECT
 */
const walletConnectProjectId = process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID ?? ''
const defaultWcSettings = await getWalletConnectV2Settings(
  'eip155',
  [defaultChain.id.toString()],
  walletConnectProjectId
)
const walletConnectModal = new WalletConnectModal({
  projectId: walletConnectProjectId,
})
const walletConnectV2Adapter = new WalletConnectV2Adapter({
  adapterSettings: { qrcodeModal: walletConnectModal, ...defaultWcSettings.adapterSettings },
  loginSettings: { ...defaultWcSettings.loginSettings },
})
web3Auth.configureAdapter(walletConnectV2Adapter)

export const web3AuthConnector = Web3AuthConnector({
  web3AuthInstance: web3Auth,
})

interface IWeb3AuthContext {
  isConnected: boolean
  web3Auth: Web3Auth
  provider: IProvider | null
}

const Web3AuthContext = createContext({} as IWeb3AuthContext)

export const useWeb3Auth = () => useContext(Web3AuthContext)

export function Web3AuthProvider({ children }: PropsWithChildren) {
 ...commonWeb3AuthImplementation

  const contextProviderValue: IWeb3AuthContext = {
    isConnected,
    web3Auth,
    provider,
  }

  return (
    <Web3AuthContext.Provider value={contextProviderValue}>{children}</Web3AuthContext.Provider>
  )
}

And the error message looks like on a screenshot.

deps: "@walletconnect/modal": "^2.6.2", "@web3auth/base": "^8.6.2", "@web3auth/coinbase-adapter": "^8.6.2", "@web3auth/ethereum-provider": "^8.6.2", "@web3auth/metamask-adapter": "^8.6.2", "@web3auth/modal": "^8.6.2", "@web3auth/wallet-connect-v2-adapter": "^8.6.2", "@web3auth/web3auth-wagmi-connector": "^6.0.0", "next": "^14.2.3", "viem": "^2.7.22", "wagmi": "^2.9.8"

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

What Wagmi package(s) are you using?

wagmi

Wagmi Version

2.9.8

Viem Version

2.7.22

TypeScript Version

5.0.4

Anything else?

No response

github-actions[bot] commented 1 month ago

Hello @oleksandrtarapata.

Please provide a minimal reproduction using StackBlitz, TypeScript Playground (for type issues), or a separate minimal GitHub repository.

Minimal reproductions are required as they save us a lot of time reproducing your config/environment and issue, and allow us to help you faster.

Once a minimal reproduction is added, a team member will confirm it works, then re-open the issue.

oleksandrtarapata commented 4 weeks ago

Hi, please check this reprodution example link

oleksandrtarapata commented 2 weeks ago

Hey guys, can you pay attention on it please?

github-actions[bot] commented 3 days ago

This issue has been locked since it has been closed for more than 14 days.

If you found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Wagmi version. If you have any questions or comments you can create a new discussion thread.

wevm / wagmi