Unhandled Runtime Error - TypeError: setVisible is not a function (WalletMultiButton)

[GageBachik]

Describe the bug
Currently clicking on the select wallet modal button returns setVisible is not a function in a nextjs app.

To Reproduce
Steps to reproduce the behavior:

1. Download the repo at https://github.com/solana-labs/wallet-adapter/tree/master/packages/starter/nextjs-starter
2. Add these two lines to index.tsx

import { useWallet } from "@solana/wallet-adapter-react";
import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";

3. Add a simple modal button to the page:

const wallet = useWallet();
  if (!wallet.connected) {
    /* If the user's wallet is not connected, display connect wallet button. */
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          marginTop: "100px",
        }}
      >
        <WalletMultiButton />
      </div>
    );
  }

4. Click it

Expected behavior
Should allow me to select a wallet of my choice

Screenshots

[jordaaash]

See the FAQ section on this topic: https://github.com/solana-labs/wallet-adapter/blob/master/FAQ.md#-is-undefined--uncaught-typeerror-cannot-destructure-property--uncaught-in-promise-walletnotconnectederror

Also see the example code for how to set this up: https://github.com/solana-labs/wallet-adapter#setup

You are missing the WalletModalProvider you need to use this. Please reopen if this doesn't fix your issue.

[jordaaash]

It's also worth noting that @solana/wallet-adapter-react-ui isn't a dependency of @solana/wallet-adapter-nextjs-starter, so make sure you add it to the package.json.

[GageBachik]

Wow I feel so dumb.
Spent legit the last hour on this being so confused all to realize I had ConnectionProvider and WalletProvider wrapping my component but not WalletModalProvider...

Guess I just needed someone to tell me to check the context again!

Sorry for taking your time!

[jordaaash]

All good! I hope people read the instructions step by step but it is what it is 😅