No wagmi config found. Ensure you have set up a config

[francesco-gaglione]

Hi all,
I'm opening this discussion since I tried a lot of solutions but at this point, I think there is something strange in the libraries. Let me explain.

Probably my case is an edge case but... I have a turborepo monorepo that includes a next.js v13 app and a custom react components library. I'm trying to create a sort of WalletConnect wrapper and this should be easy, just create a wrapper component. I did it and it works into the monorepo using the wagmi version 1.3.3.

Then I published the react library (private repo) installed in a strach next.js app and this works, installed again into a new next.js app does not work.

In the meanwhile, some other releases of wagmi were done and I really need that fix for some known issue but changing the wagmi version to >=1.3.4 errors happened into the monorepo too.

The error were 2:

• wagmi does not accept the w3mconnector anymore
• no wagmi config found

I tried to:

• @ts-ignore on config error
• disable SSR in the _app.ts file of next.js
• useMemo()
• react Context
• try to use a custom singleton instead of useMemo or react Context

With these solutions, something changed:

• of course the ts-ignore pass the library build but don't know if it would work and I can't solve it since it is wagmi/walletconnect libraries problem (so please consider to open a priority issue)
• disabling SSR no wagmi config error disappear in compilation time but still present at runtime
• using useMemo, Context and Singleton (I did it because I noticed that the wrapper were initialized more time, and it is strange) but even if the config doesn't change the error is still there

I cannot share the original repo for reproduction, but, I replicated the issue in a new repo with the original status, so no SSR disable, no memo and no Singleton.

Here the repo: https://github.com/francesco-gaglione/replicate

Please can you help to understand what is happening? I think there is something borderline to be solved in the libraries. (the config issue of course, but something else too)

[xzilja]

The setup is incorrect, your wagmi config is initialised inside https://github.com/francesco-gaglione/replicate/blob/master/packages/react-components/src/components/wallet-connect/WalletConnectWrapper.tsx which is used inside app component. Next.js re-renders app component every time when global state like page route changes causing issues with wagmi.

As I replied in your previous questions, you need to set wagmi up outside of react's render loop i.e. outside of next.js <App> component.

[francesco-gaglione]

@0xasimetriq yes I tried but didn't commit because the error is the same. Now I committed the changed you are mentioning but still same error.

[francesco-gaglione]

@0xasimetriq I'm sorry. But I did it, as you said but some errors are there. There is the current analisys:

there is the code:

const {publicClient} = configureChains([polygonMumbai], [w3mProvider({projectId: "key"})])
const wagmiConfig = createConfig({
    autoConnect: true,
    connectors: w3mConnectors({projectId: "key", chains: [polygonMumbai]}),
    publicClient
})
const ethereumClient: EthereumClient = new EthereumClient(wagmiConfig, [polygonMumbai]);

// Main app component
export default function App({ Component }: AppProps) {

    return (
        <>

            <WagmiConfig config={wagmiConfig}>
                <AppLayout Component={Component} />
            </WagmiConfig>

            <Web3Modal projectId={"key"} ethereumClient={ethereumClient}/>
        </>
    )
}

and we have a compiler error that is out of our control:

web:build: Type error: Type '(WalletConnectConnector | InjectedConnector)[]' is not assignable to type '(() => Connector<any, any>[]) | Connector<any, any>[] | undefined'.
web:build:   Type '(WalletConnectConnector | InjectedConnector)[]' is not assignable to type 'Connector<any, any>[]'.
web:build:     Type 'WalletConnectConnector | InjectedConnector' is not assignable to type 'Connector<any, any>'.
web:build:       Type 'WalletConnectConnector' is not assignable to type 'Connector<any, any>'.
web:build:         Property 'storage' is protected but type 'Connector<Provider, Options>' is not a class derived from 'Connector<Provider, Options>'.

so, just for fun tried with:

    connectors: [w3mConnectors({projectId: "key", chains: [polygonMumbai]})],

of course similar error:

web:build: Type error: Type '(WalletConnectConnector | InjectedConnector)[]' is missing the following properties from type 'Connector<any, any>': id, name, chains, options, and 24 more.

So at this point tried with //@ts-ignore without expectations:

web:build: TypeError: Cannot read properties of undefined (reading 'http')

So using the configuration that you said and with different library versions same error. Version tried:

    "wagmi": "^1.3.7", //&&1.3.8
    "@web3modal/core": "^2.6.2",
    "@web3modal/ethereum": "^2.6.2",
    "@web3modal/react": "^2.6.2"

I'm sorry but this is the implementation given by the official documentation and it doesn't work. Please investigate it. It is clear that w3mconnectrs are not supported anymore and then I don't know if http error is a consequence of that.

Some note to help you. The code I shared in the repo for reproducing the error actually worked before using wagmi at version 1.3.3. After that we upgraded as we needed fixes that were made in later versions and nothing has worked since then.

[xzilja]

Remove ^ to use strict versions, add viem dependency, remove @web3modal/core dependency (it is not in docs), delete your .lock file and install dependencies fresh with latest versions, you are getting a type error that was patched a while ago, so likely had cached versions

[francesco-gaglione]

@0xasimetriq Tried. Removed the ^ from all and removed @web3modal/core

{
...
    "wagmi": "1.3.8",
    "viem": "1.2.10",
    "@web3modal/ethereum": "2.6.2",
    "@web3modal/react": "2.6.2"
...
}

deleted yarn.lock and deleted all node_modules directories. Reinstall with yarn install and even tried with yarn install --check-files.

But same error:

web:build: Type error: Type '(WalletConnectConnector | InjectedConnector)[]' is missing the following properties from type 'Connector<any, any>': id, name, chains, options, and 24 more.

[xzilja]

Ah, you are using yarn. Is it yarn v1? We did get few reports about package inconsistencies when it is used, not much we can do there but you should be able to get everything going with npm / pnpm or latest yarn version (I believe they are on v3 now)

[francesco-gaglione]

Yes probably that is the problem. Unfortunately, we cannot use yarn v2 or v3 so I migrated the repo to use pnpm. And from the first test, it seems to work. I'm investigating if it is fully working. In the meantime thank you very much.

Note: consider adding this yarn warning visible in the doc so that other people can avoid using yarn v1

[phuybregts]

Hi all,

I have been experiencing the same problem as discussed in this thread. After having tried most if not all the potential solutions out there I wanted to share my findings after many feeble attempts.

Some context: I have been using the WagmiConfig code structure as proposed in the official Wagmi documentation and have had no problems using it in React. Now that I am attempting to use the same approach in NextJS I am running into all kinds of problems.

I have tried:

Using Yarn v1.22.xx,
Using Yarn v3,
Using PNPM,
Wrapping layout.js (I am using App routing as opposed to Pages routing) in WagmiProvider,
Wrapping a specific child page in WagmiProvider,
Having Wagmi logic in both layout and specific child pages without using a WagmiProvider component,
much more...

For clarification purposes I want to stress that my wagmi configuration is tried and tested so there is little room for error there (multiple applications in React have used the same setup and in my current NextJS project Header/Connectbutton wagmi functionality all works as expected > mind you these components only use useAccount, UseConnect, etc functions). Then by process of elimination I noticed that adding "use client" tag seemed to not produce the errors I have been seeing (no erros in compiling and no errors in local dev mode) and that got me thinking.

1. Wagmi provider DOES work in my Header component (where I also manage ConnectButton/Moralis/other configurations). This leads me to believe that the WagmiConfig is setup correctly as, clearly, it picks up other functionality and logic just fine. useAccount, UseConnect, etc all work and those require a client-side approach seeing as SSR will not be able to pick up your local data.

2. if client-side ("use client") works for other Wagmi functionality and it picks up the information in the WagmiProvider then clearly it the setup works. So I used "use client" in a section that I wanted to have server side rendered and BOOM the setup worked as expected.

3. Now the problem has shifted from thinking I had a bad WagmiConfigWrapper (which I didnt) to having a component that I wanted to have serverside rendered that now needs to be clientside rendered.

So now I am thinking about how this problem came to be and it seems likely that the SSR is the culprit here. Now please correct me if I'm wrong but could it be that the SSR does not have access to the Wagmi Config as it requires (at least in part) some key information that is only available to the client side? This would explain the journey I have had in identifying the problem. Could it be that the server requires a local walletaddress to execute the functions it is supposed to run but it does not have access to those variables (i.e. config file which is filled with local connectors?).

I am very well aware of this thread being closed as it has been answered however the accepted answer (which seemingly was only tested on a limited scale and not thoroughly) does not seem to be offering a solution to the problem being described.

Any and all help would be very much appreciated.

WagmiProvider:

"use client";

import {
  WagmiConfig,
  createConfig,
  configureChains,
  mainnet,
  sepolia,
} from "wagmi";
import { hardhat, goerli } from "wagmi/chains";
import { alchemyProvider } from "wagmi/providers/alchemy";
import { publicProvider } from "wagmi/providers/public";
import { InjectedConnector } from "wagmi/connectors/injected";
import { MetaMaskConnector } from "wagmi/connectors/metaMask";
import { CoinbaseWalletConnector } from "wagmi/connectors/coinbaseWallet";
import { WalletConnectConnector } from "wagmi/connectors/walletConnect";
// import { DataProvider } from "./components/DataProvider.jsx";

import { useEffect } from "react";

import Moralis from "moralis";

const ALCHEMYAPIKEY = process.env.NEXT_ALCHEMY_API_KEY;

const WALLETCONNECTID = process.env.NEXT_WALLETCONNECT_PROJECT_ID;

const MORALISAPIKEY = process.env.NEXT_REACT_APP_MORALIS_API_KEY;

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet, sepolia, hardhat, goerli],
  [alchemyProvider({ apiKey: ALCHEMYAPIKEY }), publicProvider()]
);

const config = createConfig({
  autoConnect: true,
  connectors: [
    new MetaMaskConnector({ chains }),
    new CoinbaseWalletConnector({
      chains,
      options: {
        appName: "wagmi",
      },
    }),
    // new WalletConnectConnector({
    //   chains,
    //   options: {
    //     projectId: WALLETCONNECTID,
    //   },
    // }),
    new InjectedConnector({
      chains,
      options: {
        name: "Injected",
        shimDisconnect: true,
      },
    }),
  ],
  publicClient,
  webSocketPublicClient,
});

const WagmiProvider = ({ children }) => {
  useEffect(() => {
    async function MoralisInit() {
      if (!Moralis.Core.isStarted) {
        await Moralis.start({
          apiKey: MORALISAPIKEY,
        });
      } else {
        console.log("Moralis already started");
      }
    }
    // localStorage.setItem("firstvisit", "true");
    if (localStorage.getItem("fv") === null) {
      localStorage.setItem("fv", "true");
    }

    //Set initial/default advert cycle.
    async function setInitAdvertCycle() {
      if (localStorage.getItem("AdvertCycle") === null) {
        localStorage.setItem("AdvertCycle", "6");
      }
    }
    MoralisInit();
    setInitAdvertCycle();
  }, []);

  //Monitor changes in Metamask-Wallet
  useEffect(() => {
    if (window.ethereum) {
      window.ethereum.on("chainChanged", () => {
        window.location.reload();
      });
      window.ethereum.on("accountsChanged", () => {
        window.location.reload();
      });
    }
    var firstVisit = localStorage.getItem("fv");
    if (firstVisit === "true") {
      firstVisit = true;
    } else {
      firstVisit = false;
    }
  });

  return <WagmiConfig config={config}>{children}</WagmiConfig>;
};

export default WagmiProvider;