Web3Modal connectors issue with typescript

Question

My Dapp is on typescript using web3modal for react wagmi, and after upgrading my apps to latest web3modal, I'm getting connector issues. I'm attaching code, error and packages used accordingly.

import {
  EthereumClient,
  w3mConnectors,
  w3mProvider,
} from '@web3modal/ethereum';
import { polygonMumbai } from 'wagmi/chains';
import './index.css';
import { WagmiConfig } from 'wagmi';
import { createConfig, configureChains } from 'wagmi';

const projectId = window._env_.REACT_APP_WAGMI_CLIENT_ID as string;

export const chains = [polygonMumbai];
const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]);
export const wagmiClient = createConfig({
  autoConnect: true,
  connectors: w3mConnectors({ chains, projectId }),
  publicClient,
});

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement,
);

root.render(
  <React.StrictMode>
    <WagmiConfig config={wagmiClient}>
      <Provider store={store}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Provider>
    </WagmiConfig>
  </React.StrictMode>,
);

Follwoing are the relevant package versions:

"dependencies": {
"@types/react": "^18.2.8",
"@types/react-dom": "^18.2.4",
"@web3modal/ethereum": "2.6.2",
"@web3modal/react": "2.6.2",
"react": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^5.1.3",
"viem": "1.2.5",
"wagmi": "1.3.3",

},

And I'm getting the following error with connectors:

Failed to compile.

TS2322: Type '(WalletConnectConnector | InjectedConnector)[]' is not assignable to type '(() => Connector<any, any>[]) | Connector<any, any>[] | undefined'.
  Type '(WalletConnectConnector | InjectedConnector)[]' is not assignable to type 'Connector<any, any>[]'.
    Type 'WalletConnectConnector | InjectedConnector' is not assignable to type 'Connector<any, any>'.
      Type 'WalletConnectConnector' is not assignable to type 'Connector<any, any>'.
        Property 'storage' is protected but type 'Connector<Provider, Options>' is not a class derived from 'Connector<Provider, Options>'.
    28 | export const wagmiClient = createConfig({
    29 |   autoConnect: true,
  > 30 |   connectors: w3mConnectors({ chains, projectId }),
       |   ^^^^^^^^^^
    31 |   publicClient,
    32 | });
    33 |

Answer 1

I was able to fix this issue by doing the following:

• Making sure wagmi/viem dependencies correspond to those used by web3modal (yours seem okay)
• Importing chains from wagmi and not from wagmi/chains

Maybe unrelated, but I also needed to add a webSocketPublicClient instance to createConfig:

const { publicClient, webSocketPublicClient } = configureChains(chains, [
    w3mProvider({ projectId }),
]);
export const wagmiConfig = createConfig({
    autoConnect: true,
    connectors: w3mConnectors({ projectId, chains }),
    publicClient,
    webSocketPublicClient, <---
});

For other people having issues doing this upgrade, I'd also suggest to take a look at the wagmi 1.x migration guide: https://wagmi.sh/core/migration-guide#1xx-breaking-changes