TypeError: getEnteranceFee is not a function

Question

I'm trying to read my raffle's entrance fee but I keep getting this error;

TypeError: getEnteranceFee is not a function

I know there is a typo in getEnteranceFee but it shouldn't affect anything because it's like that everywhere. For now.

I have tried the answer given here but it didn't work for me.

I don't get why useWeb3Contract was unable to get the function.

RaffleEntrance.js Component

import { useWeb3Contract, useMoralis } from "react-moralis"
import { abi, contractAddresses } from "../constants"
import { useEffect } from "react"

// have a funtion to enter the lottery

export default function RaffleEntrance() {
    const { chainId: chainIdHex, isWeb3Enabled } = useMoralis()
    const chainId = parseInt(chainIdHex)
    const raffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null
    /* const{runContractFuction: enterRaffle} = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress, // specify networkId
        functionName: "enterRaffle",
        params: {},
        msgValue: 
    }) */

    const { runContractFuction: getEnteranceFee } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress, // specify networkId
        functionName: "getEnteranceFee",
        params: {},
    })

    useEffect(() => {
        if (isWeb3Enabled) {
            //try to read the raffle entrance fee
            async function updateUI() {
                const entranceFeeFromContract = await getEnteranceFee()
                console.log(entranceFeeFromContract)
            }
            updateUI()
        }
    }, [isWeb3Enabled])
    return <div>Hello from Lottery Entrance</div>
}

Raffle.sol snippets

    /* State Variables */
    uint256 private i_enteranceFee;
    

    /* Functions */
    constructor(
        address vrfCoordinatorV2, //address
        uint256 enteranceFee,
        bytes32 gasLane,
        uint64 subscriptionId,
        uint32 callbackGasLimit,
        uint256 interval
    ) VRFConsumerBaseV2(vrfCoordinatorV2) {
        i_vrfCoordinator = VRFCoordinatorV2Interface(vrfCoordinatorV2);
        i_enteranceFee = enteranceFee;
        i_gasLane = gasLane;
        i_subscriptionId = subscriptionId;
        i_callbackGasLimit = callbackGasLimit;
        s_raffleState = RaffleState.OPEN;
        s_lastTimeStamp = block.timestamp;
        i_interval = interval;
    }

    /* view / pure functions */
    function getEnteranceFee() public view returns (uint256) {
        return i_enteranceFee;
    }

ABI snippet

{
        "type": "function",
        "name": "getEnteranceFee",
        "constant": true,
        "stateMutability": "view",
        "payable": false,
        "gas": 29000000,
        "inputs": [],
        "outputs": [{ "type": "uint256" }]
    },

Answer 1

Hi you have misspelled runContractFunction in this line:

const { runContractFuction: getEnteranceFee } = useWeb3Contract({

It should be:

const { runContractFunction: getEnteranceFee } = useWeb3Contract({

I would recommend renaming getEnteranceFee so you're not normalizing typos existing in your code in general.