Runtime error in next app

[AjayAsnani]

import { useEffect, useState } from "react";
import { useWeb3Contract, useMoralis } from "react-moralis";
import { abi, contractAddresses } from "../constants";
import { ethers } from "ethers";
import { useNotification } from "@web3uikit/core";

export default function LotteryEntrance() {
  const { chainId: chainIdHex, isWeb3Enabled } = useMoralis();
  const chainId = parseInt(chainIdHex);
  const raffleAddress =
    chainId in contractAddresses ? contractAddresses[chainId][0] : null;

  let [entranceFee, setEntranceFee] = useState("0");
  let [numPlayers, setNumPlayers] = useState("0");
  let [recentWinner, setRecentWinner] = useState("0");
  const dispatch = useNotification();

  const { runContractFunction: enterRaffle } = useWeb3Contract({
    abi: abi,
    contractAddress: raffleAddress,
    functionName: "enterRaffle",
    params: {},
    msgValue: entranceFee,
  });

  const { runContractFunction: getEntranceFee } = useWeb3Contract({
    abi: abi,
    contractAddress: raffleAddress,
    functionName: "getEntranceFee",
    params: {},
  });

  const { runContractFunction: getNumberOfPlayers } = useWeb3Contract({
    abi: abi,
    contractAddress: raffleAddress,
    functionName: "getNumberOfPlayers",
    params: {},
  });

  const { runContractFunction: getRecentWinner } = useWeb3Contract({
    abi: abi,
    contractAddress: raffleAddress,
    functionName: "getRecentWinner",
    params: {},
  });

  async function updateUI() {
    const entranceFeeFromCall = await getEntranceFee().toString();
    const numPlayersFromCall = await getNumberOfPlayers().toString();
    const recentWinnerFromCall = await getRecentWinner();
    setEntranceFee(entranceFeeFromCall);
    setNumPlayers(numPlayersFromCall);
    setRecentWinner(recentWinnerFromCall);
    console.log(raffleAddress);
  }

  useEffect(() => {
    if (isWeb3Enabled) {
      updateUI();
    }
  }, [isWeb3Enabled]);

  const handleSuccess = async function (tx) {
    await tx.wait(1);
    handleNewNotification(tx);
    updateUI();
  };

  const handleNewNotification = function () {
    dispatch({
      type: "info",
      message: "Transaction complete",
      title: "Tx Notofication",
      position: "topR",
      //icon: "bell",
    });
  };

  return (
    <div>
      Hi from Lottery Enrance
      {raffleAddress ? (
        <div>
          <button
            onClick={async function () {
              await enterRaffle({
                onSuccess: handleSuccess,
              });
            }}
          >
            Enter Raffle
          </button>
          <div>
            Entrance Fee is : {ethers.utils.formatUnits(entranceFee, "ether")}{" "}
            ETH <br />
            Number of players={numPlayers}
            <br />
            Recent winner ={recentWinner}
          </div>
        </div>
      ) : (
        <div>No raffle address detected</div>
      )}
    </div>
  );
}

@PatrickAlphaC @alymurtazamemon

[alymurtazamemon]

@AjayAsnani Try this;

-const entranceFeeFromCall = await getEntranceFee().toString();
+const entranceFeeFromCall = (await getEntranceFee()).toString();

[AjayAsnani]

import { useEffect, useState } from "react";
import { useWeb3Contract, useMoralis } from "react-moralis";
import { abi, contractAddresses } from "../constants";
import { ethers } from "ethers";
import { useNotification } from "@web3uikit/core";

export default function LotteryEntrance() {
  const { chainId: chainIdHex, isWeb3Enabled } = useMoralis();
  const chainId = parseInt(chainIdHex);
  const raffleAddress =
    chainId in contractAddresses ? contractAddresses[chainId][0] : null;

  let [entranceFee, setEntranceFee] = useState("0");
  let [numPlayers, setNumPlayers] = useState("0");
  let [recentWinner, setRecentWinner] = useState("0");
  const dispatch = useNotification();

  const {
    runContractFunction: enterRaffle,
    isLoading,
    isFetching,
  } = useWeb3Contract({
    abi: abi,
    contractAddress: raffleAddress,
    functionName: "enterRaffle",
    params: {},
    msgValue: entranceFee,
  });

  const { runContractFunction: getEntranceFee } = useWeb3Contract({
    abi: abi,
    contractAddress: raffleAddress,
    functionName: "getEntranceFee",
    params: {},
  });

  const { runContractFunction: getNumberOfPlayers } = useWeb3Contract({
    abi: abi,
    contractAddress: raffleAddress,
    functionName: "getNumberOfPlayers",
    params: {},
  });

  const { runContractFunction: getRecentWinner } = useWeb3Contract({
    abi: abi,
    contractAddress: raffleAddress,
    functionName: "getRecentWinner",
    params: {},
  });

  async function updateUI() {
    const entranceFeeFromCall = (await getEntranceFee()).toString();
    const numPlayersFromCall = (await getNumberOfPlayers()).toString();
    const recentWinnerFromCall = await getRecentWinner();
    setEntranceFee(entranceFeeFromCall);
    setNumPlayers(numPlayersFromCall);
    setRecentWinner(recentWinnerFromCall);
    console.log(raffleAddress);
  }

  useEffect(() => {
    if (isWeb3Enabled) {
      updateUI();
    }
  }, [isWeb3Enabled]);

  const handleSuccess = async function (tx) {
    await tx.wait(1);
    handleNewNotification(tx);
    updateUI();
  };

  const handleNewNotification = function () {
    dispatch({
      type: "info",
      message: "Transaction complete",
      title: "Tx Notofication",
      position: "topR",
      //icon: "bell",
    });
  };

  return (
    <div>
      Hi from Lottery Enrance
      {raffleAddress ? (
        <div>
          <button
            onClick={async function () {
              await enterRaffle({
                onSuccess: handleSuccess,
              });
            }}
            disabled={isLoading || isFetching}
          >
            Enter Raffle
          </button>
          <div>
            Entrance Fee is : {ethers.utils.formatUnits(entranceFee, "ether")}{" "}
            ETH <br />
            Number of players={numPlayers}
            <br />
            Recent winner ={recentWinner}
          </div>
        </div>
      ) : (
        <div>No raffle address detected</div>
      )}
    </div>
  );
}

Done that still getting error.
@alymurtazamemon

[alymurtazamemon]

@AjayAsnani yes this is another error, getEntranceFee variable is undefined, something is wrong here;

const { runContractFunction: getEntranceFee } = useWeb3Contract({
  abi: abi,
  contractAddress: raffleAddress,
  functionName: "getEntranceFee",
  params: {},
});

[AjayAsnani]

I checked the error is related to the tostring() method, and if i remove the () then it shows error in this line {ethers.utils.formatUnits(entranceFee, "ether")}{" "}.

@alymurtazamemon

[alymurtazamemon]

@AjayAsnani this getEntranceFee is giving undefined so first error was saying can't convert to toString of undefined and when you removed the () the undefined converted to string and stored inside setEntranceFee that later cause the error here, so we need to fix the actual point other are fine.

And the location of error I had mentioned, here the error could occur due to invalid address, abi, or anything related to these.

[AjayAsnani]

ok thanks @alymurtazamemon, will check everything and let you know.