rainbow-me / rainbowkit

The best way to connect a wallet 🌈 🧰

Home Page:https://rainbowkit.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[bug] <`useConfig` must be used within `WagmiProvider`.>

diandiandiandedian opened this issue · comments

Is there an existing issue for this?

  • I have searched the existing issues

RainbowKit Version

2.0.6

wagmi Version

2.6.0

Current Behavior

Following the migration guide and installation will report errors

If I use
const account = useAccount(),
it reports an error
useConfig must be used within WagmiProvider.

WX20240428-161254@2x

Expected Behavior

Cannot be compiled

Steps To Reproduce

import { WagmiProvider, http } from 'wagmi'
import {mainnet, arbitrum, polygon, goerli} from "wagmi/chains";
import {
    RainbowKitProvider, getDefaultConfig,
} from "@rainbow-me/rainbowkit";
import {QueryClient, QueryClientProvider} from '@tanstack/react-query'
import {ConnectButton} from '@rainbow-me/rainbowkit';
import '@rainbow-me/rainbowkit/styles.css';
import {useAccount, useContractRead} from "wagmi";

function App() {


const account = useAccount()

    function confirm() {
        console.log('aaaa')
    }

    const config2 = getDefaultConfig({
        appName: 'RainbowKit demo',
        projectId: '',
        chains: [mainnet],
        transports: {
            [mainnet.id]: http(),
        },
    })

    const queryClient = new QueryClient();

    return (
        <WagmiProvider config={config2}>
            <QueryClientProvider client={queryClient}>
                <RainbowKitProvider modalSize="compact">
                    <div className="App">
                        <header className="App-header">
                            <ConnectButton/>
                            <button onClick={() => confirm()}>open metamask</button>
                        </header>
                    </div>
                </RainbowKitProvider>
            </QueryClientProvider>
        </WagmiProvider>

    );
}

export default App;

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

commented

@diandiandiandedian This might be a webpack issue. I copied your code and it works fine for me. Can you share a small reproducible example ? Codesandbox or github repo would work great.