WalletConnect
(NextJS) Error: Please call "createAppKit" before using "useAppKit" hook #5435
-
|
(Next.js) I already have createAppKit defined correctly in app/providers and have that component wrapped correctly in layout.tsx However when I try to call the useAppKit() hook in this client component If I use the w3m-button component it works with all the configurations that I defined in /providers |
Beta Was this translation helpful? Give feedback.
Replies: 6 comments 5 replies
-
|
Faced with the same issue today |
Beta Was this translation helpful? Give feedback.
-
|
Are you able to resolve this issue? |
Beta Was this translation helpful? Give feedback.
-
|
The issue is where you are importing createAppKit from, you need to use
NOT
|
Beta Was this translation helpful? Give feedback.
-
|
Yes this works for me |
Beta Was this translation helpful? Give feedback.
-
|
Thank you |
Beta Was this translation helpful? Give feedback.
-
|
I am importing it from the correct place i.e. |
Beta Was this translation helpful? Give feedback.
-
|
Facing this exact same issue today. According to the default next js setup docs here https://docs.reown.com/appkit/next/core/installation. How is the modal function used on the context/index because eslint shows that modal is declared but never read? I think it could be the reason for the error. |
Beta Was this translation helpful? Give feedback.
-
make sure you’re using "use client" and not a server component |
Beta Was this translation helpful? Give feedback.
-
|
This fixed the issue. Thank you! |
Beta Was this translation helpful? Give feedback.
-
'use client';
import { Button } from '@/components/ui/button';
import { useAppKit } from '@reown/appkit/react';
export default function Home() {
const { open } = useAppKit();
return (
<div className="grid min-h-screen grid-rows-[20px_1fr_20px] items-center justify-items-center gap-16 p-8 pb-20 font-[family-name:var(--font-geist-sans)] sm:p-20">
<Button onClick={() => open()}>Connect</Button>
</div>
);
}I've used all of that, but returns same error |
Beta Was this translation helpful? Give feedback.
The issue is where you are importing createAppKit from, you need to use
import { createAppKit } from '@reown/appkit/react';NOT
import { createAppKit } from '@reown/appkit';