Unable to integrate near/wallet-selector in Next app

Question

I am trying to integrate near/wallet-selector https://github.com/near/wallet-selector in my Nextjs app but it fails with error window not defined.

ReferenceError: window is not defined
Uncaught     at new PersistentStorage (file://D:\swap\node_modules\@near-wallet-selector\core\index.umd.js:2444:50)
    at <unknown> (file://D:\swap\node_modules\@near-wallet-selector\core\index.umd.js:2507:18)
    at <unknown> (file://D:\swap\node_modules\@near-wallet-selector\core\index.umd.js:2:65)
    at Object.<anonymous> (file://D:\swap\node_modules\@near-wallet-selector\core\index.umd.js:5:3)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)

What I tried so far

• tried to import NearWalletSelector dynamically

const NearWalletSelector = dynamic(
  () => import('@near-wallet-selector/core/'),
  {
    ssr: false,
  }
);

• tried using

useEffect(() => {
 if (typeof window !== "undefined") {
   const selector = await NearWalletSelector.init({config...}).then((instance) => {
        return instance.getAccounts().then(async (newAccounts) => {
          syncAccountState(localStorage.getItem('accountId'), newAccounts);
         
          window.selector = instance;
          setSelector(instance);
        });
      })
      .catch((err) => {
        console.error(err);
        alert('Failed to initialise wallet selector');
      });
},[]}
}

Can someone help me with resolving this issue?

Thanks

Answer 1

this issue is resolved in the latest version of near/wallet-selector

update the package to latest or just reinstall the package by

# Using Yarn
yarn add @near-wallet-selector/core

# Using NPM.
npm install @near-wallet-selector/core

and also need to install the required wallet packages as suggested here

then we can directly import the package and set things up like this

import { setupWalletSelector } from "@near-wallet-selector/core";
import { setupModal } from "@near-wallet-selector/modal-ui";
import { setupNearWallet } from "@near-wallet-selector/near-wallet";
import { setupMyNearWallet } from "@near-wallet-selector/my-near-wallet";
import { setupSender } from "@near-wallet-selector/sender";
import { setupMathWallet } from "@near-wallet-selector/math-wallet";
import { setupNightly } from "@near-wallet-selector/nightly";
import { setupLedger } from "@near-wallet-selector/ledger";
import { setupWalletConnect } from "@near-wallet-selector/wallet-connect";

const selector = await setupWalletSelector({
  network: "testnet",
  modules: [
    setupNearWallet(),
    setupMyNearWallet(),
    setupSender(),
    setupMathWallet(),
    setupNightly(),
    setupLedger(),
    setupWalletConnect({
      projectId: "c4f79cc...",
      metadata: {
        name: "NEAR Wallet Selector",
        description: "Example dApp used by NEAR Wallet Selector",
        url: "https://github.com/near/wallet-selector",
        icons: ["https://avatars.githubusercontent.com/u/37784886"],
      },
    }),
  ],
});

const modal = setupModal(selector, {
  contractId: "guest-book.testnet"
});