When i reload the page, i get the following error "You need to call Moralis.start with an applicationId before using Moralis."

Moralis General
#1

Here’s the code which is causing the error

export default function Profile() {
  
  const { Moralis } = useMoralis();
  
  const currentUser = Moralis.User.current();
  
  return (
    <>
      <Head>
        <title>Blog-x</title>
        <meta name="description" content="Blog-x" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <div className={styles.wrapper}>
          <div className={styles.columns}>
            <div className={styles.sides}>
              <Sidebar /> 
            </div>
            <div className={styles.side2}>
              <div className={styles.feed}>
                <img src={ currentUser && currentUser.attributes.profileBanner ? currentUser.attributes.profileBanner : defaultImgs[1]} className={styles.profileBanner} />
                <div className={styles.pfpContainer}>
                  <img src={defaultImgs[0]} className={styles.profilePFP} />
                <div className={styles.profileName}>{currentUser && currentUser.attributes.username}</div>
                <div className={styles.profileWallet}>@ {
                  !currentUser ? "" : currentUser.attributes.ethAddress.slice(0, 10) + "..." + currentUser.attributes.ethAddress.slice(-4)
                }</div>
                
                <Link href="/settingsPage">
                <div className={styles.profileEdit} >
                    Edit Profile
                </div>
            </Link>
                
                {/* <Link></Link> */}
                <div className={styles.profileBio}> { 
                  currentUser && currentUser.attributes.bio ? currentUser.attributes.bio : "This is a bio" }</div> 
                </div>
                <div className={styles.profileTabs}>
                  <div className={styles.profileTab}>Blogs</div>
                  <Blogs profile={true}/>
                
                </div>                        
              </div>
              <div className={styles.widgets}>
                <Widgets />
              </div>
            </div>
          </div>
        </div>
      </main>
    </>
  );
}

You can see that I have written currentUser && currentUser.attribute.<x> because on reloading the page those lines showed the error that currentUser is null. Now on handling that error, it turns out that useMoralis is not being called properly. It gives this error on reload You need to call Moralis.start with an applicationId before using Moralis.. But the strange thing is that before reloading the page or coming to this page from some other page, everything works perfectly fine.

Some screenshots

  1. before reloading the page. This is my profile page

    image
    image961×1007 72.9 KB

  2. After reloading

    image
    image1253×610 19.8 KB

I am taking the Twitter Clone using Moralis blog and video as a reference for making this project.
@cryptokid any idea how to solve this issue? Thank you

#2

I don’t know how to fix it, @alex may be able to help in few hours

#3

you may have to use useEffect maybe, check if isInitialized in useEffeect, maybe use await

#4

You can do this - use Moralis.User.current() when isInitialized is true and store the value in a state (useState).

Otherwise just use user from the useMoralis hook to get the current user. If you’re using react-moralis, take advantage of the state handling that the library gives you.

#5

Okay cool! Will try it and update the thread