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

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.

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}>
        <Component {...pageProps} />

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)
  }, [])

  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) =>
          <div key={index} className="">
            <img src={"https://cyberboyz3000.com/json-img/JPEG/" + nft.token_id + ".jpg"} alt="" className="w-32 h-32"/>

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:

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

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

Did it worked fine in development mode ?

Yes everything is fine in dev mode

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

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.

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