2

when I try and use the Solana front-end wallet adapter and add it to my next project, I keep getting the following error until I change something on the UI.

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Here is the following code:

  export default function Home() {
  const wallet = useWallet();
  ...

  return (
    <div className="">
      <Head>
        <title>Barricade</title>
        <meta name="description" content="Barricade - Securing the future!" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <WalletMultiButton />

      <button onClick={fetchNFTs}>fetch</button>
    </div>
  );
}

1 Answer 1

7

Try to use dynamic

import dynamic from 'next/dynamic';

// add this
const WalletMultiButtonDynamic = dynamic(
    async () => (await import('@solana/wallet-adapter-react-ui')).WalletMultiButton,
    { ssr: false }
);

return (
    <div className="">
      <Head>
        <title>Barricade</title>
        <meta name="description" content="Barricade - Securing the future!" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <WalletMultiButtonDynamic />    // instead of <WalletMultiButton />

      <button onClick={fetchNFTs}>fetch</button>
    </div>
  );

Ref: https://github.com/solana-labs/wallet-adapter/issues/648

0

This site is temporarily in read-only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .