wallet-adapter: An error was reported in next.js project

Okay, after investigating at great length, this is pretty bizarre.

First off, this fails, just as it does in the reproduction you provided:

import { getPhantomWallet } from "@solana/wallet-adapter-wallets";
// ...
const wallets = useMemo(() => [getPhantomWallet()], []);

If we import the whole package:

import * as allWallets from "@solana/wallet-adapter-wallets";

console.log('all wallets', allWallets);

We see it’s there, as getters:

But in the terminal running yarn dev, I see this:

all wallets Object [Module] {
  getBitKeepWallet: [Getter],
  getBitpieWallet: [Getter]
}

We only see these two wallets. Everything is missing including and after Blocto. This is notable, because Blocto is one of the few wallets with an external dependency – @blocto/sdk – which is seen in our next.config.js.

Attempting to use Blocto fails with the same error:

import { getBloctoWallet } from "@solana/wallet-adapter-wallets";
// ...
const wallets = useMemo(() => [getBloctoWallet()], []);

But using BitKeep and Bitpie succeeds:

import { getBitKeepWallet, getBitpieWallet } from "@solana/wallet-adapter-wallets";
// ...
const wallets = useMemo(() => [getBitKeepWallet(), getBitpieWallet()], []);

It seems like loading or transpiling the Blocto SDK is silently failing, and it’s causing everything after it to fail.

I think we could be seeing a side effect of https://github.com/portto/blocto-sdk/issues/14 / https://github.com/portto/blocto-sdk/pull/15.

Even after this issue was closed / PR merged, I’m not convinced that Blocto’s SDK works properly when window is undefined.

The nextjs-starter package here uses dynamic loading to skip SSR: https://github.com/solana-labs/wallet-adapter/blob/a883ebc5706f38235ee4d5838c2ddb458accdebf/packages/starter/nextjs-starter/pages/_app.tsx#L10-L18

The example package does the same thing: https://github.com/solana-labs/wallet-adapter/blob/a883ebc5706f38235ee4d5838c2ddb458accdebf/packages/starter/example/pages/_app.tsx#L12-L17

This was originally done to sidestep a few wallets unsafely using window, localStorage, and other Window APIs.

So, as for a workaround for Next.js users – it’s not ideal, but for now, try to use dynamic loading like this.

Figuring out what’s actually going on is going to require digging around in the Blocto SDK.

@jordansexton thanks for the help! I remedied the issues follow these steps:

git clone https://github.com/solana-labs/wallet-adapter/
cd wallet-adapter
yarn && yarn build
cd packages/starter/nextjs-starter
yarn && yarn build
yarn dev

then I just copied the started directory out to my own project

cp wallet-adapter/packages/starter/next-starter /path/to/project
yarn && yarn build

To get this to build without errors I had had to remove dependencies that I had not installed from the next.config.js. I ended up with the following dependencies in my config

const withTM = require("next-transpile-modules")([
    "@blocto/sdk",
    "@project-serum/sol-wallet-adapter",
    "@solana/wallet-adapter-base",
    "@solana/wallet-adapter-react",
    "@solana/wallet-adapter-react-ui",
    "@solana/wallet-adapter-bitkeep",
    "@solana/wallet-adapter-bitpie",
    "@solana/wallet-adapter-blocto",
    "@solana/wallet-adapter-clover",
    "@solana/wallet-adapter-coin98",
    "@solana/wallet-adapter-coinhub",
    "@solana/wallet-adapter-ledger",
    "@solana/wallet-adapter-mathwallet",
    "@solana/wallet-adapter-phantom",
    "@solana/wallet-adapter-safepal",
    "@solana/wallet-adapter-slope",
    "@solana/wallet-adapter-solflare",
    "@solana/wallet-adapter-sollet",
    "@solana/wallet-adapter-solong",
    "@solana/wallet-adapter-tokenpocket",
    "@solana/wallet-adapter-torus",
]);

Leaving this here in-case people run into the same errors. Thanks for the help!

The Blocto SDK has had several updates since this, which may have fixed the issue. Additionally, https://github.com/solana-labs/wallet-adapter/pull/195 has led to a substantial refactor – you no longer need the wallets package, and you can import only the wallet packages you want to use.

Appreciate you digging into this, I’ll go with the workaround in the meantime.

Thank you! Will investigate today.

Here is a repo that I get the issue in https://github.com/dylf/solwallet-testing

@jjmnde That suggests you aren’t importing getSolletWallet from the wallets package. It generally helps to see the full code that’s producing the error instead of just the error.