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