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

[70nyIT]

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",

[RivetParallel]

same issue

[bitoffabyte]

Same here

[xzilja]

Hey guys, ty for report. Since this is not reproducible in CodeSandbox, I have few ideas you could try out

1. Delete node_modules and any .lock files you have and install everything fresh (could be some lingering wagmi version conflict)
2. If you were using version: 2 before, try to clear localStorage (v2 stuff changed here, maybe it is conflicting with older entries)

[RivetParallel]

it happens when deploying, in localhost no problem

[bitoffabyte]

Hey guys, ty for report. Since this is not reproducible in CodeSandbox, I have few ideas you could try out

1. Delete node_modules and any .lock files you have and install everything fresh (could be some lingering wagmi version conflict)
2. If you were using version: 2 before, try to clear localStorage (v2 stuff changed here, maybe it is conflicting with older entries)

While cloning the code-sandbox repo and trying it locally, it produces the error
Also tried it in a different machine, same issue

[70nyIT]

Confirm what @bitoffabyte just said!

@0xAsimetriq I already tried both option 1. and 2. and he issue is there.

rm -rf node_modules/ yarn.lock
yarn install

Then launching the application on a new Private Window, and the error is there too locally. Same if I clean the localStorage in my browser, error sill there.

(removed only yarn.lock as I do not use npm, thus no package-lock.json)

[xzilja]

I have just updated my personal minimal demo to 2.2.0, here is the commit https://github.com/0xAsimetriq/web3modal-demo/commit/3df8ed2daeeec14c74d400671208c002663ee151

Unable to replicate the issue. Nor can I replicate in provided codesandboxes (only issue I saw there was error connecting to relay websocket, but after replacing projectid with my own, it was solved).

Last idea I have, maybe try with strict versions i.e. 2.2.0 instead of ^2.2.0?

[70nyIT]

I already have the "strict" version (going to update the CodeSandbox too to reflect it). I have just noticed in your demo you set version to '1' and not '2'. Going to try that change

[xzilja]

Let me know if that works, but it shouldn't matter I think. Also, try to console log your ethereumClient to double check that it is defined before it is passed to web3modal perhaps.

[bitoffabyte]

I have just updated my personal minimal demo to 2.2.0, here is the commit 0xAsimetriq/web3modal-demo@3df8ed2

Unable to replicate the issue. Nor can I replicate in provided codesandboxes (only issue I saw there was error connecting to relay websocket, but after replacing projectid with my own, it was solved).

Last idea I have, maybe try with strict versions i.e. 2.2.0 instead of ^2.2.0?

I had cloned a fresh copy, created the env and ran yarn and yarn dev I am still getting this issue

[lemihthien]

same issue! i'm using yarn install

[xzilja]

Was able to replicate with yarn, worked fine with npm, gona look into this

[70nyIT]

Yeah, was about to tell you the same. With npm no problem, with yarn I have this problem! Good you were able to replicate

[xzilja]

@70nyIT @lemihthien @RivetParallel @bitoffabyte and anyone else who was using yarn, could you try again with latest versions of wagmi and web3modal please. Issue should be resolved.

Just in case

rm -rf node_modules; rm yarn.lock; yarn

[lemihthien]

@70nyIT @lemihthien @RivetParallel @bitoffabyte and anyone else who was using yarn, could you try again with latest versions of wagmi and web3modal please. Issue should be resolved.

Just in case

rm -rf node_modules; rm yarn.lock; yarn

Great, it worked for me. Thank you for your help!

[tradaik]

*package.json: "@web3modal/ethereum": "^2.2.1", "@web3modal/react": "^2.2.1", "wagmi": "^0.12.1",

• Today, I have this error. Any suggestions on how to fix this?

[xzilja]

@tradaik there is no 2.2.1 at the moment, and that standalone package error is a known bug, fixing it today, to fix it meanwhile you can install that package @web3modal/standalone

[tradaik]

@tradaik there is no 2.2.1 at the moment, and that standalone package error is a known bug, fixing it today, to fix it meanwhile you can install that package @web3modal/standalone

Thank you so much! Its so easy lol! <3

[xzilja]

@tradaik you can now install 2.2.1 and remove @web3modal/standalone dependency

As always with these things, I recommend to remove node_modules and .lockfile and install everything with fresh / latest versions.

[xzilja]

After few confirmations and from my own tests, I believe issue is now solved when using latest modal packages 2.2.1 and latest version of wagmi. As per above, to ensure that you do have latest stuff indeed installed, try to do a fresh install without node_modules and .lock file.

Feel free to @ me here if you are still experiencing the issue 👍 after doing above.

[AndonMitev]

I have the same problem on ^2.4.5 - any ideas?

[xzilja]

I haven't seen this issue for a long while now, if you are upgrading from earlier versions of modal, make sure to combine it with latest viem / wagmi. Sometimes you need to delete node_modules and package-lock.json file and install everything fresh.

[AndonMitev]

Yes i do have wagmi: 1.1.1 and viem: 1.0.2, used this one rm -rf node_modules; rm yarn.lock; yarn and tried manually as well after deleting node_modules and yarn.lock

Any ideas, building desktop app with Next 13.0 and Tauri

[xzilja]

I see, then it's more likely an implementation issue, do you have a repo / codesandbox you can share with reproduction? If modal is used in react, don't initialise wagmi and ethereum client inside components that re-render, do it outside of them as in docs and examples.

[AndonMitev]

Here is the example repo:

https://github.com/AndonMitev/tauri-playground/blob/main/app/page.tsx

I'm using NextJS 13.4 Nothing is re-rendered more than it should but somehow cannot manage to make it work :S btw is good this modal for desktop applications?

[zk118]

Same issue here @AndonMitev

Using Vuejs3 and yarn.

"@wagmi/core": "^1.1.1",
"@web3modal/ethereum": "^2.4.5",
"@web3modal/html": "^2.4.5",
"viem": "^1.0.2"

[xzilja]

You can reference this example for simple nextjs implementation https://github.com/WalletConnect/web3modal-examples/tree/main/nextjs-wagmi

And since both of you are using yarn, maybe it's somehow causing this, perhaps by not installing sub-dependencies of some packages correctly?

[zk118]

And since both of you are using yarn, maybe it's somehow causing this, perhaps by not installing sub-dependencies of some packages correctly?

I just tested by switching to npm and it works. Seems like it's not compatible with yarn.

[AndonMitev]

Yeah can confirm with npm works, but what if we are using yarn in our project, is it fine to install with npm and after that to continue using yarn and delete package-lock.json file?

[carloscip]

Having the same issue, also got it working by using npm. But why is this issue closed. I think that there's still an issue here, and it should be possible to use yarn.

[xzilja]

@carloscip @AndonMitev @zk118 and others, which yarn version(s) are you using?

[AndonMitev]

@0xAsimetriq yarn@1.22.19

[xzilja]

Is this an issue on newer / latest yarn versions? Since yarn v1 is very old, it could be having trouble resolving some dependencies / sub dependencies of the packages we use due to newer package-lock.json file formats that we or our dependencies use.

[AndonMitev]

@0xAsimetriq, any suggestions which version of yarn to use?

[xzilja]

Going with latest is always the best bet imho

[AdrianChyzh]

@0xAsimetriq Hello! Also using yarn v1.22.19 which is lts.

Same error here.

Should we wait for better yarn compatibility?

P. S. Still reproduced after removing node_modules, yarn lock.

[xzilja]

@AdrianChyzh judging by yarn's docs https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable yarn v1 is only in maintanance mode, I'm not sure if they will fix anything in this version. Looks like v3 is what's used?

[AdrianChyzh]

@AdrianChyzh judging by yarn's docs https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable yarn v1 is only in maintanance mode, I'm not sure if they will fix anything in this version. Looks like v3 is what's used?

Thanks for your reply. You might be right, I will try setting yarn to v3. Note: I managed to fix the issue by switching from yarn to npm. I think it should be highlighted somewhere, IF yarn v3 won't work

[xzilja]

npm / pnpm should work and I believe newer versions of yarn as well, but if you run into issues with their latest one, let me know 👍