Closed Tarbez closed 3 weeks ago
Saw a similar issue when I tried this and read somewhere dynamic in Next is the best way to resolve this.
i.e.
import dynamic from "next/dynamic";
...
const WalletMultiButtonDynamic = dynamic(
async () =>
(await import("@solana/wallet-adapter-react-ui")).WalletMultiButton,
{ ssr: false }
);
...
return (
<main>
<div>
<WalletMultiButtonDynamic>
....
</WalletMultiButtonDynamic>
</div>
</main>
Hope that helps.
dynamic in Next is the best way to resolve this
Yeah, that's right. The state on the client will always be different than the server because the server can't know about the wallets injected into the browser.
Describe the bug Using the default components designed by the library, I can't seem to figure a way to fix this unless I do overwrite most of the work and the files, and since am using a the new version of nextjs somehow I'm facing this issue >
Error: Hydration failed because the initial UI does not match what was rendered on the server.
To Reproduce Steps to reproduce the behavior:
Expected behavior It should not be a button that is wrapping the next component cause then you would have 2 buttons nested.
Screenshots