Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task done
diandiandiandedian opened this issue Apr 28, 2024 · 1 comment
Closed
1 task done

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

diandiandiandedian opened this issue Apr 28, 2024 · 1 comment

Comments

@diandiandiandedian
Copy link

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

@magiziz
Copy link
Contributor

magiziz commented Apr 29, 2024

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants