[React - Moralis] Having an issue with WebAPI call

Moralis General
#1

Firstly, to begin, It does not matter what WebAPI call I use.

import './App.css';
import {useMoralis, useMoralisWeb3Api} from "react-moralis";

function App() {
    const { authenticate, isAuthenticated, user } = useMoralis();
    const Web3Api = useMoralisWeb3Api();

    const fetchBal = async () => {
        try {
            const result = await Web3Api.account.getNFTs({address: "0x95272629cCa43106a879607DD10b8de1f0E46Ff5", chain: "ropsten"});
            console.log(result);
        } catch (e) {
            console.log(e);
        }
    }

    if (!isAuthenticated) {
    return (
        <div>
          <button onClick={() => authenticate()}>Authenticate</button>
        </div>
    );
    }

    return (
      <div>
        <h1>Welcome {user.get("username")}</h1>
          <p>
              <button onClick={fetchBal}> test fetchBal</button>
          </p>
      </div>
    );
    }

export default App;

Is returning

TypeError: Cannot read properties of undefined (reading 'getNFTs')
    at fetchBal (App.js:10)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
    at executeDispatch (react-dom.development.js:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
    at processDispatchQueue (react-dom.development.js:8288)
    at dispatchEventsForPlugins (react-dom.development.js:8299)
    at react-dom.development.js:8508
    at batchedEventUpdates$1 (react-dom.development.js:22396)
    at batchedEventUpdates (react-dom.development.js:3745)
    at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
    at attemptToDispatchEvent (react-dom.development.js:6005)
    at dispatchEvent (react-dom.development.js:5924)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at discreteUpdates$1 (react-dom.development.js:22413)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)
#2

What version of Moralis sdk you use?

#3

according to npm
[email protected]

#4

What you have in dependencies then, that doesn’t look like a Moralis sdk version

#5

My bad, that’s the npm version.
I did an npm install -g moralis about an hour ago so it would be pretty recent. I’m attempting a clean-install now

#6

Alternatively you can get Moralis SDK version on runtime with Moralis.CoreManager.get("VERSION")
I tested your code and it worked fine.

#7

Moralis.CoreManager.get(“0.0.57”)

Is not giving syntax highlighting.
Do you need to import moralis as well as react-moralis?

These are my imports
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { MoralisProvider} from "react-moralis";

app.js

import './App.css';
import {useMoralis, useMoralisWeb3Api} from "react-moralis";

I really appreciate the support you have provided so far, this community is amazing.

I’ve also tried
npm clean-install react react-dom moralis react-moralis
It didn’t work.

In a moment I’m going to try change IDE (webstorm) to VS Code
and then a full reinstall of node/npm and all it’s packages. it’ll probs break other projects but I’m getting pretty frustrated at this point.
I’ve also tried build a deploy to see if it would function as normal on a morals cloud instance and it does not, same error.

#8

You can test this in codesandbox.io
App.js:

import "./styles.css";
import { useMoralisWeb3Api } from "react-moralis";

function App() {
  const Web3Api = useMoralisWeb3Api();

  const fetchBal = async () => {
    try {
      const result = await Web3Api.account.getNFTs({
        address: "0x95272629cCa43106a879607DD10b8de1f0E46Ff5",
        chain: "ropsten"
      });
      console.log(result);
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <div>
      <p>
        <button onClick={fetchBal}> test fetchBal</button>
      </p>
    </div>
  );
}

export default App;

index.js:

import ReactDOM from "react-dom";
import { MoralisProvider } from "react-moralis";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <MoralisProvider
    appId="ID_"
    serverUrl="SERVER_URL"
  >
    <App />
  </MoralisProvider>,
  rootElement
);

I also added moralis and moralis-react to dependencies.

Moralis.User.current error
#9

Okay, it does work in the sandbox. Well, suppose that’s my new ide for the time being.

#11

I had this same error and ended up solving it… somehow both the appId and serverUrl had changed although I just copy-pasted them yesterday