getNFTs() not working with react-moralis

Moralis General
#1

I only get an empty array back when I try to run getNFTs() for my rinkeby testnet account in my react application.

The account address is 0x7a84ac83a8e54bd8f8bd79cfae12038c46b417a3

I tried with vanilla JS and it worked as it should, but it doesn’t seem to work with react.

Here is my code and here are the logs that show that my cloud function returns some of my NFTs, but the getNFTs() function returns nothing.

      Moralis.Cloud.run("getUserItems")
      .then(async ownedItems => {
        console.log('CLOUD FUNCTION')
        console.log(ownedItems)
        console.log('')
        console.log('')
        console.log('')


        Moralis.Web3.getNFTs({chain: 'rinkeby'})
        .then(res => {
          console.log('GET NFTS FUNCTION')
          console.log(res)
          console.log('')
          console.log('')
        })
        .catch(err => console.log(err))

        Moralis.Web3.getNFTs({chain: 'rinkeby', address: '0x7a84ac83a8e54bd8f8bd79cfae12038c46b417a3'})
        .then(res => {
          console.log('GET NFTS FUNCTION WITH ADDRESS')
          console.log(res)
          console.log('')
          console.log('')
          console.log('')
        })
        .catch(err => console.log(err))

image
image788×482 14.9 KB

1 Like
#2

Spun up a test project. The “web3” object returned from:

const { web3 } = useMoralis();

is a Web3.js object as in the library Web3.js. The static functions like Moralis.Web3.getNFTs() are not part of Web3.js so therefore the runtime returns a “web3.getNFTs is not a function” error.

To use the Crypto Common Functions in react get the Moralis instance from the hook, then use Moralis.Web3.getNFTs() as usual. Make sure to wait for isInitialized to be true or the function could be called before the setup code is finished.

import { useMoralis } from "react-moralis";
import { useEffect, useState } from "react";

const options = {
  chain: "rinkeby",
  address: "0x7a84ac83a8e54bd8f8bd79cfae12038c46b417a3",
};
const initialState = [];

function App() {
  const { isInitialized, Moralis } = useMoralis();
  const [nfts, setNfts] = useState(initialState);

  useEffect(() => {
    if (isInitialized) {
      Moralis.Web3.getNFTs(options).then(setNfts);
    }
  }, [isInitialized, Moralis]);

  if (!isInitialized) {
    return null;
  }

  return (
    <div className="App">
      {nfts.map((nft, i) => (
        <p key={i}>{JSON.stringify(nft)}</p>
      ))}
    </div>
  );
}

export default App;
3 Likes
#3

So I was already doing that, just without using isInitialized, so I tried that and no luck. Then I spun up a test app with the exact same code, and still nothing.

I then tried it on my laptop and it somehow worked.

I noticed that on my laptop I had both react-moralis and moralis installed but on my desktop I only had react-moralis installed. So I installed moralis and it still wasn’t working, but I noticed the version of moralis it gave me when I installed on my desktop was 0.0.21 while on my laptop it was 0.0.25. I tried installing 0.0.25 but npm was giving me some dependency conflict, which I believe was due to me using npm version 7+

So I ended up deleting node_modules, changing the moralis version in package.json to 0.0.25 and then running “npm install --legacy-peer-deps” and everything seems to work now.

@mayjer Thank you for the help!

3 Likes
#4

Yes - I had the same issue. It has to do with keeping react-moralis and moralis versions in sync. If moralis is outdated and react-moralis is newer it will fail. Your suggestion fixed it for me too