Rabby wallet: 'connection.connector.getProvider is not a function'

[0xbid]

Describe the bug

Periodically, all functions from hooks (e.g. connect, writeContract / writeContractAsync) fails with connection.connector.getProvider is not a function.

Refreshing page fixes it.

It only occurs with Rabby wallet, Metamask stays connected always and does not run into the issue.

Link to Minimal Reproducible Example

No response

Steps To Reproduce

Nextjs 13+ SSR configured

wagmiConfig.ts

export const wagmiConfig = createConfig({
    // Setup chains
    chains: chains,
    transports: {
        [mainnet.id]: http(),
        [goerli.id]: http(),
        [sepolia.id]: http(),
        [holesky.id]: http()
    },

    // Enable SSR support (needs cookies)
    ssr: true,
    storage: createStorage({
        storage: cookieStorage
    }),

    connectors: [injected()]
});

Web3Provider.tsx

'use client';

// ...

const queryClient = new QueryClient();

const Web3Provider = ({
    children,
    initialState
}: {
    children: React.ReactNode;
    initialState: State;
}) => {
    return (
        <>
            <WagmiProvider config={wagmiConfig} initialState={initialState}>
                <QueryClientProvider client={queryClient}> {children}</QueryClientProvider>
            </WagmiProvider>
        </>
    );
};

layout.tsx

// ...
const initialState = cookieToInitialState(wagmiConfig, headers().get('cookie'));
This may also be relevant: I do not use any 3rd party connector (e.g. ConnectKit, Web3Modal, etc). I just do a simple:

'use client';

// ...

       const { connectors, connect } = useConnect();

        if (!isWalletConnected) {
            try {
                connect({ connector: connectors[0] });
            } catch (e) {
               // ...
            }
        }

Wagmi Version

2.3.1

Viem Version

2.4.0

TypeScript Version

10.9.1

Check existing issues

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

Anything else?

I think it would be really helpful to know more about how connection.connector.getProvider could occur from a dev perspective, e.g. what is going on. Then we can narrow down why it doesn't work with Rabby.

[tmm]

Please try the latest version of Wagmi. If that doesn't work, then happy to take a look into this.

[0xbid]

Please try the latest version of Wagmi. If that doesn't work, then happy to take a look into this.

I've updated to the most recent versions:

    "viem": "^2.7.8",
    "wagmi": "^2.5.7"

And still regularly hit the issue.

It would be great if you could look into it further, let me know if you would like any more details.

[shunkakinoki]

Get the same issue here w/ the latest versions!

ncaught (in promise) TypeError: connection.connector.getProvider is not a function
    at getConnectorClient (getConnectorClient.js:40:49)

repro standing by...

[glitch-txs]

wer repro 👀

[shunkakinoki]

In my case, it was a wrong wagmiConfig - fixed it with proper config, apologies for the confusion 🙌

[0xbid]

In my case, it was a wrong wagmiConfig - fixed it with proper config, apologies for the confusion 🙌

What was wrong? Can you post your previous wagmiConfig and new one?

[0xbid]

@shunkakinoki can you explain what you did? 🙏

[mlenser]

We've had this same issue for a while. We're following the setup on https://docs.walletconnect.com/web3modal/nextjs/about.

@shunkakinoki any idea what was wrong in the config?

I thought it might be the change to

import { defaultWagmiConfig } from '@web3modal/wagmi/react/config';

but the issue persists.

Note: This occurs on all wallets, not just Rabby.

[0xbid]

Experience has been the same here, after more thorough testing we realized that it occurs on all wallets. However, Rabby definitely hits it the most. I suspect something to do with chains / chain switching.

[0xbid]

my code is just:

import { defaultWagmiConfig } from '@web3modal/wagmi/react/config';
import { cookieStorage, createStorage } from 'wagmi';
import { mainnet, goerli, sepolia, holesky } from 'wagmi/chains';

export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;

if (!projectId) throw new Error('Project ID is not defined');

// Create wagmiConfig
export const wagmiConfig = defaultWagmiConfig({
    chains: [mainnet, goerli, sepolia],
    projectId, // required

    ssr: true,
    storage: createStorage({
        storage: cookieStorage
    })
});

[duytien-ortho]

I have same error here, my app use both pages router and app router. I had to change to config of provider for app to same in _app.tsx in pages router, and then it work

export const wagmiConfig = createConfig({
  chains: [sepolia, mainnet],
  transports: {
    [sepolia.id]: http(alchemyHttpUrl),
    [mainnet.id]: http(alchemyHttpUrl),
  },
  ssr: false,
  connectors: [
    walletConnect({
      projectId,
      showQrModal: false,
      metadata: metadata,
    }),
    injected({
      shimDisconnect: true,
    }),
  ],
});

[maggo]

I did a little investigation and found that with HMR (changing any file in development) we can reproduce this error reliably. @tmm

What happens:

Right after HMR this error pops up in the console

Warning: Cannot update a component (`Unknown`) while rendering a different component (`Hydrate`). To locate the bad setState() call inside `Hydrate`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at Hydrate (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/[email protected].….2_4kfqnyv2uxhrthdepbhemkhena/node_modules/wagmi/dist/esm/hydrate.js:11:13)
    at WagmiProvider (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/[email protected].….2_4kfqnyv2uxhrthdepbhemkhena/node_modules/wagmi/dist/esm/context.js:14:13)
    at LayoutProviders (webpack-internal:///(app-pages-browser)/./src/app/_/LayoutProviders/LayoutProviders.tsx:46:26)
    at body

after this error the connection.connector object gets overwritten somehow.

Before it's a full Connector object with all required methods like getProvider but then during this reinitialization it turns into a plain object with only string fields {id: 'injected', name: 'Injected', type: 'injected', uid: 'a6c56c73721'} missing all methods.

Afterwards whenever any hook or other functionality tries to access the objects methods it throws with an error like

TypeError: connection.connector.getProvider is not a function
    at getConnectorClient (getConnectorClient.js:40:50)
    at writeContract (writeContract.js:24:98)
    at Object.mutationFn (writeContract.js:14:92)
    at Object.fn (mutation.js:75:31)
    at run (retryer.js:93:31)
    at createRetryer (retryer.js:126:5)
    at executeMutation (mutation.js:70:81)
    at Mutation.execute (mutation.js:109:26)

Findings

Disabling wagmi's SSR mode with ssr: false seems to solve the issue. I could not find the exact cause of this yet as I don't have a local development environment for wagmi, but I suspect the error to happen somewhere around here maybe: https://github.com/wevm/wagmi/blob/3e4c3fb7c44089983433043a6221517a9ff1f9ca/packages/core/src/hydrate.ts#L21

[codedbyjordan]

getting the same issue after setting up with WalletConnect through their guide with Next.js 14

[mlenser]

@glitch-txs I've created a basic reproduction at https://github.com/mlenser/wagmi-nextjs-connector-bug. The README has reproduction steps. I followed the setup instructions on web3modal/wagmi pretty closely.

Please let me know if you need any additional details.

[zillarelli]

I'm having the same issue, using the latest versions of wagmi and viem as of today. Setup exactly as described in the docs. Only difference is that I'm using the defaultWagmiConfig from Web3Modal which I believe just wraps createConfig anyways:

  const config = defaultWagmiConfig({
    chains: [{...primaryNetwork, rpcUrls}],
    projectId: projectId!,
    metadata,
    ssr: true,
    storage: createStorage({
      storage: cookieStorage
    })
  });

I did try the suggestion from @maggo which was to set ssr to false, but that caused a lot of performance issues with page rendering, so I don't believe that to be a working solution for this.

[github-actions[bot]]

Hello @0xbid. Please provide a minimal reproduction using new.wagmi.sh for runtime issues or TypeScript Playground for type issues. Issues marked with "needs reproduction" will be closed if they have no activity within 3 days.

[jxom]

^ please provide a reproduction with only the wagmi dependency.

[0xbid]

^ please provide a reproduction with only the wagmi dependency.

I am pretty sure it can be reproduced with any Nextjs style setup (using SSR). The Next example would work.

The key seems to be when in development mode (e.g. npm run dev) when making code changes that would cause the page to re-build, this triggers. I think @maggo has outlined the issue well with a consistent way to reproduce.

[jxom]

Might be worth trying again. I made some updates today to improve SSR hydration.

[mlenser]

The issue seems to be resolved on my basic reproduction above once dependencies are updated to wagmi 2.5.11: https://github.com/mlenser/wagmi-nextjs-connector-bug/tree/upgraded-dependencies.

I'll watch for it in our real application. It was occurring a fair bit on Sentry and our Vercel logs.

Thank you for the update @jxom.

[github-actions[bot]]

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 other comments you can create a new discussion.