Solidity query works in dev environment but not in production build (nextJS)

Question

I am calling a function that queries the token balance of a user. The query works on a dev environment but not in production build. I am using metamask and ethers to interact with my contract on the frontend, since that is also what I use for deployment. I deployed the contract using remix IDE and that is where I get my contract abi from.

  async function fetchAccountBalance() {
    const abi = ['function getUserTokenBalance() view returns (uint256)'];
    try {
      if (window.ethereum) {
        const provider = new ethers.BrowserProvider(window.ethereum);

        window.ethereum.request({ method: 'eth_requestAccounts' });

        const packNFTStorage = new ethers.Contract(
          regularPackStorageContractAddress,
          abi,
          await provider.getSigner()
        ) as unknown as packNFTStorage;

        console.log(packNFTStorage);

        // Call the claimSoulboundPack function
        const balance = packNFTStorage.getUserTokenBalance();
        console.log('Account balance fetched successfully');

        return balance;
      }
    } catch (error) {
      console.error('Error fetching account balance:', error);
    }
  }

This is what the function looks like when called in frontend:

 async function fetchUserAccountBalance() {
    try {
      const accountBalance = await fetchAccountBalance();

      setAccountBalance(Number(accountBalance));
      console.log(accountBalance);
    } catch (error) {
      console.error('Error fetching account balance:', error);
    }
  }

  useEffect(() => {
    {
      isClient ? fetchUserAccountBalance() : console.log('Server Side');
    }
  }, [currentSport, minterConfig, accountId]);

my ethers version is "ethers": "^6.7.1", This is what the error message looks like, I have triple checked the Contract ABI and done different methods on defining or importing it to no avail.