"Error: Web3Api not initialized, run Moralis.start() first"

Moralis General
#1

This code actually satisfies my current need, but it is also showing the error: “Error: Web3Api not initialized, run Moralis.start() first”


import { useMoralis } from "react-moralis";

import { useContext, useState, useEffect } from "react"
import AuthContext from "../stores/authContext"


export default function Home(props) {

  const [nftCount, setNftCount] = useState(0);
  const [venomPoints, setVenomPoints] = useState(0);

  const { authenticate, isAuthenticated, logout, user } = useContext(AuthContext);

  const { Moralis, isInitialized, isInitializing } = useMoralis();

  
  const loged_user_eth_addresss = user.get('ethAddress');
  const options = { chain: 'eth', address: loged_user_eth_addresss };

  async function getNFTCount(options) {
    // get NFTs for address
    const nft_response = await Moralis.Web3API.account.getNFTs(options);
    const nfts = nft_response.result;

    setNftCount(nfts.length);

    // calculate total venom points
    let venom_points = 0;
    nfts.forEach(function (nft) {
      venom_points += getVenomPoints(nft.synced_at);
    });
    venom_points = Math.round(venom_points);

    setVenomPoints(venom_points);
  }//endof getNFTs()

  getNFTCount(options);


  return (
      <div>
        <div>
          <a>Welcome<br/><span>{user && maskEthAddress(user.get("ethAddress"))}</span></a>
          <a>Venom Points<br/><span>{venomPoints}</span> </a>
        </div>
        <div className="row">
          <a>Cyber Hornets Held<br/><span>{nftCount}</span></a>
        </div>
      </div>
   )

}

I am using MoralisProvider like this

import { MoralisProvider } from "react-moralis";

import Layout from '../components/Layout';
import styled, { ThemeProvider } from 'styled-components'

import { AuthContextProvider } from '../stores/authContext'

function MyApp({ Component, pageProps }) {

  if (!process.env.NEXT_PUBLIC_MORALIS_APP_ID || !process.env.NEXT_PUBLIC_MORALIS_SERVER_URL) {
    return <h3>keys not found</h3>
  }

  return (
    <MoralisProvider
      appId={process.env.NEXT_PUBLIC_MORALIS_APP_ID}
      serverUrl={process.env.NEXT_PUBLIC_MORALIS_SERVER_URL}
    >
      <AuthContextProvider>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </AuthContextProvider>  
    </MoralisProvider>
  );
}

export default MyApp
#2

where is this Home used?

#3

It is the index.js file

page structure
page structure914×702 53.8 KB

#4

put your getNFTCount in useEffect instead of there, and add isInitialized as the depnedencies

useEffect(() => {
   if (isIntialized) {
       getNFTCount(options)
   }
}, [isIntialized])
1 Like
#5

Thank you very much @YosephKS.

This code removed previous warning.

  useEffect(() => {
     if (isInitialized) {
         getNFTCount(options)
     }
  }, [isInitialized]);
1 Like