web3modal: [bug] - `Error: ClientCtrl has no client set` after upgrading to `2.2.0`

Link to minimal reproducible example

https://codesandbox.io/s/interesting-water-lr0i46?file=/tsconfig.json

Summary

I’m runninng into an issue that I’m having hard times to reproduce on a CodeSandbox (I’ve though recreated it - link below). I want to raise attention as I’ve seen other users in the Discussion section reporting this problem.

I’m referring to this https://github.com/WalletConnect/walletconnect-monorepo/discussions/2083

I’m going to report the issue also here, as I’m getting pretty mad.

I’m working on a dApp (unfortunately I cannot share the full codes). It is a React App with Typescript. I started by using "@web3modal/react": "2.1.1", and the integration was working with no problems.

Today, I upgraded it to "@web3modal/react": "^2.2.0", (and to "wagmi": "^0.12.1",), I followed the breaking changes introduced with this version and it compiles with no problem. The problem is that I see this error in console.

The App compiles, the only thing that doesn’t work is the Web3 Modal to connect a wallet.

This is the index.ts of my App

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {ApolloClient, ApolloProvider, HttpLink, InMemoryCache} from '@apollo/client';
import {CssBaseline, ThemeProvider} from "@mui/material";
import {theme} from "./GlobalStyles";
import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import {Web3Modal} from "@web3modal/react";
import {configureChains, createClient, WagmiConfig} from "wagmi";
import {mainnet, polygon} from "wagmi/chains";
import {store} from "./store";
import {Provider} from "react-redux";

// ----------------
// APOLLO CLIENT
// ----------------
const httpLink = new HttpLink({
  uri: process.env.REACT_APP_GRAPHQL_ENDPOINT
});
const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: httpLink
});

// ----------------
// WAGMI CLIENT
// ----------------
const chains = [mainnet, polygon];
const { provider } = configureChains(chains, [
  w3mProvider({ projectId: process.env.REACT_APP_WALLETCONNECT_PROJECT_ID as string }),
]);
const wagmiClient = createClient({
  autoConnect: true,
  connectors: w3mConnectors({
    projectId: process.env.REACT_APP_WALLETCONNECT_PROJECT_ID as string,
    version: 2,
    chains,
  }),
  provider,
});

// Web3Modal Ethereum Client
const ethereumClient = new EthereumClient(wagmiClient, chains);

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <WagmiConfig client={wagmiClient}>
        <ApolloProvider client={client}>
          <ThemeProvider theme={theme}>
            <CssBaseline />
            <App />
          </ThemeProvider>
        </ApolloProvider>
      </WagmiConfig>
    </Provider>
    <Web3Modal
      projectId={process.env.REACT_APP_WALLETCONNECT_PROJECT_ID as string}
      ethereumClient={ethereumClient}
    />
  </React.StrictMode>
);

If I comment the <Web3Modal/> component, the error disappears. If I uncomment, the error shows up.

I recreated a simpler version in CodeSandbox, with all the dependencies, but the error is not showing up there. You can find it here:

https://codesandbox.io/s/interesting-water-lr0i46?file=/tsconfig.json

If I remove all the other elements, so if I get down to have (in the return function) this

<React.StrictMode>
    <Web3Modal
      projectId={process.env.REACT_APP_WALLETCONNECT_PROJECT_ID as string}
      ethereumClient={ethereumClient}
    />
  </React.StrictMode>

The issue is still there. So the issue is definitively isolated with the <Web3Modal/> component.

But in CodeSandbox the issue is not showing up.

Any suggestions on how to debug further the issue? I’m really not understanding what can cause this, and why it does not show up in CodeSandbox. Looks like a sort of bug, but I’d like to provide more relevant information.

Thanks,

List of related npm package versions

"@web3modal/ethereum": "^2.2.0",
"@web3modal/react": "^2.2.0",
"wagmi": "^0.12.1",