0

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

Sai Kiran
  • 31
  • 5
  • Does this answer your question: [Why am I getting ReferenceError: self is not defined when I import a client-side library?](https://stackoverflow.com/questions/66096260/why-am-i-getting-referenceerror-self-is-not-defined-when-i-import-a-client-side)? – juliomalves May 23 '22 at 17:23
  • I have tried the options mentioned in the above link, it show the same error. I believe its something to do with the package but i am not sure how to find a solution. Thank you. – Sai Kiran May 24 '22 at 03:51
  • 1
    The issue was with the package and folks have already fixed this in the latest version of `near/wallet-selector` v4.0+ – Sai Kiran Jun 19 '22 at 22:41

1 Answers1

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"
});
Sai Kiran
  • 31
  • 5