Create react app throws No wagmi client found

[sibizulu]

Describe the bug No wagmi client found. Ensure you have set up a client.

Here is what i tried with reactjs. https://codesandbox.io/s/frosty-ace-bglnuw

SDK Version

• Version [2.0.0-beta-4]

[laohanme]

Same issue here on nextjs

[xzilja]

@laohanme do you have repro repository? I was able to re-create this in create react app, but everything runs as expected in our next examples.

[laohanme]

@laohanme do you have repro repository? I was able to re-create this in create react app, but everything runs as expected in our next examples.

here the repo, https://github.com/laohanme/web3modal-nextjs

everything I refer from this link https://github.com/WalletConnect/web3modal/tree/V2/examples/react

[xzilja]

@sibizulu @laohanme Not sure what the root cause is (will chat with wagmi team), but can you guys please test this on previous version of wagmi

"wagmi": "0.8.3" - Note, no ^ here, strict version.

@sibizulu got your example to work using that version

[RyanPai]

@IljaDaderko 0.8.3 version work for me thanks.

[xzilja]

@RyanPai ty, I found out what the issue is, fix will be released in beta.5, we need to make our internal wagmi/core dependency a peerDependency so it works with any version of wagmi

[sibizulu]

@IljaDaderko Thanks. It's working fine with "wagmi": "0.8.3"

[laohanme]

@IljaDaderko Much appreciate!

[FedericoBiccheddu]

@IljaDaderko I'm gettng the same error with both "wagmi": "0.8.3" and "wagmi": "0.8.5" (latest).

import type { FunctionComponent, PropsWithChildren } from 'react'

import { modalConnectors } from '@web3modal/ethereum'
import { alchemyProvider } from 'wagmi/providers/alchemy'
import { chain, configureChains, createClient } from 'wagmi'

import { WagmiConfig, useAccount } from 'wagmi'
import { Web3Modal, useWeb3Modal } from '@web3modal/react'
import { EthereumClient, walletConnectProvider } from '@web3modal/ethereum'

const ConnectorList: FunctionComponent = () => {
  const { open } = useWeb3Modal()
  const { isConnected } = useAccount()

  return (
    <div>
      {!isConnected && (
        <>
          <p>--- or ---</p>
          <button
            onClick={() => open()}
          >
            Custom Button
          </button>
        </>
      )}
    </div>
  )
}

const Root: FunctionComponent<
  PropsWithChildren & { readonly alchemyID: string }
> = ({ alchemyID, children }) => {
  const chains = [chain.mainnet, chain.goerli]

  const { provider } = configureChains(chains, [
    walletConnectProvider({ projectId: 'REDACTED' }),
    alchemyProvider({ apiKey: alchemyID }),
  ])

  const client = createClient({
    autoConnect: true,
    connectors: modalConnectors({ appName: 'REDACTED', chains }),
    provider,
  })

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

  return (
    <>
      <WagmiConfig client={client}>{children}</WagmiConfig>
      <Web3Modal
        projectId="REDACTED"
        theme="light"
        accentColor="default"
        ethereumClient={ethereumClient}
      />
    </>
  )
}

Note: ConnectorList is used as the children of Root in this case.

[xzilja]

@FedericoBiccheddu Pretty sure this is some kind of lockfile issue where older packages of web3modal are used. Try to add strict versions for beta.5 (i.e. without ^ in package.json version). if that fails, you can also try to delete a lockfile / node_modules to do completely fresh install

[FedericoBiccheddu]

Every dep in the project is strict.

  "dependencies": {
    // ...
    "@web3modal/ethereum": "2.0.0-beta.5",
    "@web3modal/react": "2.0.0-beta.5",
    // ...
    "ethers": "5.7.2",
    // ...
    "wagmi": "0.8.3",
    // ...
  }

I delete node_modules, the lock file and the store cache too, but the problem still there.

[xzilja]

@FedericoBiccheddu do you happen to have a repository I could look at to dig deeper into this?

[FedericoBiccheddu]

This is a private corporate project and cannot give access to it, unfortunately.

Trying to create a sandbox the code works correctly... The link is here: https://codesandbox.io/p/sandbox/ecstatic-cori-uozbgy

I used wagmi before with connectuikit or wagmi standalone and it was working without any problem.

The main difference is that our project is running inside docker with node:18.2.1-alpine and using pnpm@7.16.1 to install the dependencies.

What can I do in order to help you?

EDIT: I noticed that locally the style of the button (Web3Button, used in the sandbox) is not loaded. Can be related to be on a local domain?

[xzilja]

Since it works in code sandbox, my only guess is that docker might be applying cached deps during build that are somehow outdated? As for styles, it shouldn't matter if it is on localhost.

[FedericoBiccheddu]

Running the project without docker, using directly pnpm run dev results in the same problem.

Deleted folders .next, node_modules, pnpm's store and pnpm-lock.yml too.

I tried to dig and found this comment that explain the possibile cause to my problem: https://github.com/wagmi-dev/wagmi/issues/841#issuecomment-1230240827 TLDR: probabily a combination of using pnpm and wagmi using a local client instead.

Thank you for your time and support.

[brieyla1]

I can attest that this doesn't work here with PNPM as well.

wagmi == ^0.8.6 @web3modal/ethereum == 2.0.0-beta.7 @web3modal/react == 2.0.0-beta.7

pnpm and next latest

@IljaDaderko

[xzilja]

@brieyla1 ty for confirmation. I need to look into pnpm and see how it resolves peerDependencies. Usually this bug occurs when you don't have a related @wagmi/core library installed as part of npm i wagmi or there are 2 versions.

Could you try following please:

1. Delete node_modules and any .lock files
2. Try to re-install, but using npm.

Does npm work for you? Will help narrow this down to just pnpm

[brieyla1]

well since it works for everyone using NPM (including code sandbox) I guess the issue is linked with PNPM, tried it with yarn on an isolated environment and it works.

I can't test it in the full-blown environment as it uses turborepo to the fullest with loads of workspace:* deps. I can't just switch it off

wagmi works though, fixed is using rainbowkit, although I would really like to use the walletconnect web3modal solution. it seems to be a better fit...

[xzilja]

@brieyla1 I guess somehow pnpm is not using @wagmi/core package from wagmi inside our @web3modal/ethereum one. So in theory, if you install it separately as a dependency, it should work?

The only issue I forsee here is that there might be clash between @wagmi/core package inside wagmi and one you install manually. So versions for these will have to be exact.

I will look into pnpm more and will see if there are ways for us to make @web3modal easier to use with it 👍

[brieyla1]

maybe resolutions could help. I'm going to test it on my end of the spectrum. which version is web3modal using under the hood ?

wagmi@latest?

[xzilja]

Usually it uses one from wagmi package, so I'd look in your lockfile to see which version was installed by it. Or simply wagmi@latest and @wagmi/core@latest

[miladnikad]

Problem solved after upgrading to the latest version: yarn add wagmi@latest @wagmi/core@latest