[SOLVED] Trouble when running build next.js, useMoralis

Moralis General
#1

When attempting to deploy my app I get this weird error.
Before trying to run a new build. I created a gallery with a useMoralis() call where I fetch some data from getAllTokenIds
So initially I was thinking something was making it go wrong in that code. so I commented it out, but no difference. Then I commented everything out that was not in my last build. surely it should work then. but the same error occurs.
Then I added the API and server URL in my app.js to a string and did not process the env. but no changes.
I’m using Next.js and yarn as my package manager.

unknown
unknown953×527 188 KB

My code in app.js this has been working fine in my last build

import { MoralisProvider } from 'react-moralis'
import Layout from '../components/Layout'
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {

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

export default MyApp

and here is the code in the gallery

import React, { useEffect, useState } from 'react'
import { useMoralisWeb3Api } from "react-moralis";

function Gallery() {

  const Web3Api = useMoralisWeb3Api();
  const [ metadata, setMetadata ] = useState([])
  const [ parsedData, setParsedData ] = useState([])

  useEffect(() =>{
    const options = {
      address: "0x506e30de46b3d8cd56e2be747b559654e40e42c4",
      chain: "eth",
    };

    const NFTs = Web3Api.token.getAllTokenIds(options);
    NFTs.then(res => setMetadata(res.result))
    
    for(let data of metadata) 
    {
      parsed = JSON.parse(data)
      setParsedData(parsed)
    }
  }, [])
  
  console.log(parsedData)
  

  return (
    <div className="h-full flex justify-center items-center">
      <div className="grid mt-24 h-screen overflow-auto gap-8 grid-cols-2 md:grid-cols-5 lg:grid-cols-9 py-4 px-8">
      {metadata.map((nft, index) =>
        {
          return(
          <div key={index} className="">
            <img src={"https://cyberboyz3000.com/json-img/JPEG/" + nft.token_id + ".jpg"} alt="" className="w-32 h-32"/>
          </div>
          )
        })}
      </div>
    </div>
  )
}

export default Gallery

the gallery I commented out and just rendered some random text to fill the component.

I also searched in vscode if I use “useContext” hook anywhere but I don’t
I’ve checked that I’m using the latest version of moralis as well.

Hope someone know the solution :face_with_monocle:

#2

A little fix here: In NextJs, to expose environment variables to the browser by prefixing with NEXT_PUBLIC_ such as process.env.NEXT_PUBLIC_MORALIS_APPLICATION_ID and process.env.NEXT_PUBLIC_MORALIS_SERVER_URL

Check if your app works fine in dev with no errors in the console

#3

My environment variables are stored in next.config.js, and I also tried running a build with the environment variables fully exposed as a string in my app id. It does not seem related to the issue

#4

Did it worked fine in development mode ?

#5

Yes everything is fine in dev mode

#6

You said you were able to build it before, do you know what has changed since then? Are you using useContext?

#7

I did a search in VsCode to check if I was using useContext hook anywhere but no it’s not used anywhere.
The thing that has changed since then was adding animations via react-spring and Gsap, and other styling-related tasks, I use tailwind-css for this project.
Also, I’ve added fetching data to my gallery and refactoring the code that looks in the users wallet for a specific NFT. That’s done in the same manner as the code shown above.

#8

I should have tried this sooner. but removing moralis react-moralis and the adding it back with yarn fixed the issue