near-api-js Failing to connect to near

Question

Was making a svelte implementation of a near app.

We have a button that connects to the testnet network. It will open wallet to sign in. When successful, it will show the account name, the network (In this case testnet), and the available balance.

I intended to make the app connect to near, then connect to ipfs, then use both together. But not being even able to connect to near.

I wanted to make function calls to the contract in 'nft-test.stiltztinkerstein.testnet'. I compiled and deployed this wasm file into it: https://github.com/near-examples/NFT/blob/master/nft/src/lib.rs.

Error message is in the comments.

This is just a component with no args I call in App.svelte.

Code is below:

<script>
  import './near.css';
  // import { connect, keyStores, WalletConnection } from "near-api-js";
  import { Near, keyStores, WalletConnection } from "near-api-js";
  // Having an issue connecting

  //error message below

  // Uncaught TypeError: Cannot read properties of undefined (reading 'from')
  // at node_modules/safe-buffer/index.js (near-api-js.js:5283:17)
  // at __require2 (chunk-XVGJCPEK.js?v=9756519b:34:50)
  // at node_modules/base-x/src/index.js (near-api-js.js:5335:19)
  // at __require2 (chunk-XVGJCPEK.js?v=9756519b:34:50)
  // at node_modules/bs58/index.js (near-api-js.js:5465:17)
  // at __require2 (chunk-XVGJCPEK.js?v=9756519b:34:50)
  // at node_modules/borsh/lib/index.js (near-api-js.js:5840:34)
  // at __require2 (chunk-XVGJCPEK.js?v=9756519b:34:50)
  // at node_modules/near-api-js/lib/utils/serialize.js (near-api-js.js:6189:19)
  // at __require2 (chunk-XVGJCPEK.js?v=9756519b:34:50)


  let firstState = async () => { return false }

  let isLogged = firstState();


  let setup = async () => {
    let {logIn, logOut} =  await connecting();

    return {logIn, logOut};
  }

  const toggle = (logIn, logOut) => {
    return () => {
      isLogged = isLogged ? logOut() : logIn();
    }
  };


  // ----------------------
  // Helper functions
  // ----------------------

  async function connecting(){
    const near = new Near(config());
    const wallet = new WalletConnection(near, "nft-test.stiltztinkerstein");
    
    const logIn = async () => {
      wallet.requestSignIn({
        contractId: 'nft-test.stiltztinkerstein.testnet',
        methodNames: [],
      });

      return wallet.isSignedIn();
    }

    const logOut = async () => {
      wallet.signOut();

      return wallet.isSignedIn();
    }

    function config() {
      return {
        headers: {},
        networkId: 'testnet',
        keyStore: new keyStores.BrowserLocalStorageKeyStore(),
        nodeUrl: 'https://rpc.testnet.near.org',
        walletUrl: 'https://wallet.testnet.near.org',
        helperUrl: 'https://helper.testnet.near.org',
        explorerUrl: 'https://explorer.testnet.near.org'
      };
    }
  
    return {logIn, logOut};
  }

</script>

<div class="near-screen">
  {#await setup then actions}
    {#await isLogged}
      <div class="line"><p> Awaiting connection... </p></div>
    {:then truth} 
      <div class="line">    
        <button on:click={toggle(actions)}>
          {#if truth}
            Log off
          {:else}
            Log in
          {/if}
        </button>
      </div>
      {#if truth}
        <div class="line"><p>Network: </p></div>
        <div class="line"><p>Account: </p></div>
        <div class="line"><p>Balance: </p></div>
      {/if}
    {/await}
  {/await}

</div>

Answer 1

I asked around and someone suggested possibly changing your Keystore field to this:

keyStore:
    typeof window === "undefined"
        ? new keyStores.InMemoryKeyStore()
        : new keyStores.BrowseLocalStorageKeyStore(),

image of suggested solution

Answer 2

I was running into several similar problems getting near-api-js to work with svelte. What ended up working was just grabbing the near-api-js.min.js from the dist/ folder of the near-api-js node module and adding it to my static js folder.

<!-- Import it like this at top of app.html if using SvelteKit or index.html for Svelte -->
<script src="js/near-api-js.min.js">

Then you can use it like this in your components:

//window.nearApi is the interface
await window.nearApi.connect({keyStore, ...config})