Bug: useConfig must be used within WagmiProvider

[chompcoinxyz]

Describe the bug and the steps to reproduce it

I am encountering an unhandled runtime error when adding the Swap component to our minting platform built on Base. The error message states that useConfig must be used within WagmiProvider.

Steps to reproduce:

1. Create Nextjs app (v 13.4.3)
2. Create wagmi Config with createConfig()
3. Add the Swap component from OnchainKit
4. Run the application and navigate to the component that includes Swap

What's the expected behavior?

The Swap component should function correctly without any runtime errors.

Actual Behavior

An unhandled runtime error occurs, displaying the message:

Error in console:

SwapComponent:

export default function SwapComponent({ address }) {
  const ETHToken = {    
    address: "",
    chainId: chain.id,
    decimals: 18,
    name: "Ethereum",
    symbol: "ETH", 
  };

  const ChompCoin = { 
    address: process.env.NEXT_PUBLIC_TOKEN_ADDRESS,
    chainId: chain.id,
    decimals: 18,
    name: "Name",
    symbol: "SYMBOL",
  };

  return (
    address ? (
      <Swap address={address}>
        <SwapAmountInput
          label="Sell"
          token={ETHToken} 
          type="from"
        /> 
        <SwapToggleButton /> 
        <SwapAmountInput
          label="Buy"
          token={ChompCoin} 
          type="to"
        /> 
        <SwapButton /> 
        <SwapMessage /> 
      </Swap> 
    ) : (
      <div className="">Please connect the wallet</div>
    )
  );
}

wagmiConfig:

WagmiProvider:

What version of the libraries are you using?

"@coinbase/onchainkit": "^0.23.2", "@coinbase/wallet-sdk": "^4.0.3", "@tanstack/react-query": "^5.45.1", "next": "13.4.3", "viem": "^2.18.1", "wagmi": "^2.12.1"

Node.js: 18.20.3

[Zizzamia]

Thank you for reporting this. A couple of follow up questions:

1. are you using use client in any of those pages? As many of OnchainKit components work only on client side rendering because of React Hooks.
2. your message says you use wagmi 2.10.2 but in the package json it seems you have 2.12.1, I wonder if your nodemodules installation now has two version of wagmi in it. Can you try to remove all your nodemodules and do a clean install.

[chompcoinxyz]

Thank you for your reply. Reinstalling node modules helped. It works now.

[Zizzamia]

Ok sweet, thank you for checking with us.