Lesson 10 (17:48.42): Unhandled Runtime Error

[dgbweb3]

My frontend gives me an error

Unhandled Runtime Error

TypeError: _ctx.sent is undefined

components/LotteryEntrance.js (30:22) @ _callee$

28 | if (isWeb3Enabled) {
29 | async function updateUI() {

30 | const entranceFeeFromCall = (await getEntranceFee()).toString()
| ^
31 | setEntranceFee(entranceFeeFromCall)
32 | }
33 | updateUI()

LotteryEntrance.js

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

export default function lotteryEntrance() {
    const { chainId: chainIdHex, isWeb3Enabled } = useMoralis()
    const chainId = parseInt(chainIdHex)
    const raffleAddress = chainIdHex in contractAddresses ? contractAddresses[chainId][0] : null
    const [entranceFee, setEntranceFee] = useState("0")

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

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

    useEffect(() => {
        if (isWeb3Enabled) {
            async function updateUI() {
                const entranceFeeFromCall = (await getEntranceFee()).toString()
                setEntranceFee(entranceFeeFromCall)
            }
            updateUI()
        }
    }, [isWeb3Enabled])

    return (
        <div>
            Lottery Entrance greets you!<div>{entranceFee}</div>
        </div>
    )
}

[krakxn]

Is there a space/new line on top of your actual file too? Can't comprehend which one is the 30th line because of it.

Could you paste the relevant code as above, or a repo works too. Thanks

[dgbweb3]

[dgbweb3]

In my node terminal:

warn - ./node_modules/moralis/lib/browser/Web3Connector/MagicWeb3Connector.js
Module not found: Can't resolve 'magic-sdk' in '/home/dgbweb3/hh-fcc/nextjs-smartcontract-lottery/node_modules/moralis/lib/browser/Web3Connector'

[albatros-github]

This error is because "sent" is either null or undefined and "sent" is generated apparently by moralis' function call to "getEntranceFee()" and the null/undef. could be because you are not connected with metamask to hardhat node/network.

So, verify if you have added hardhat network in Metamakask, use it and add one of the private keys of one of the addresses that "hardhat node" command prints in terminal and leave open and running the "hh node" connection in the terminal before you connect to the next.js "yarn run dev" localhost:3000 app

[nicolasCinzer]

Hi @dgbweb3 , hope u doing fine and didn't let this problem stopped u! Look at this lines:

const chainId = parseInt(chainIdHex)
const raffleAddress = chainIdHex in contractAddresses ? contractAddresses[chainId][0] : null
const [entranceFee, setEntranceFee] = useState("0")

At raffleAddress, u are evaluating if chainIdHex is in contractAddresses, but chainIdHex is a Hex number (i.e 0xblabla). So, u want to evaluate chainId instead! Remember that in contractAddresses we are setting the key as NUMBERS and not HEX NUMBER!

i know it's been a long time since u post this problem, but hoping this answer help someone else!

Cheers fellows!

[mmuaaz]

import { chainId } from "react-moralis"
//Have a function to enter the lottery
import { abi, contractAddresses } from "../constants"
import { useEffect, useState } from "react"
export default function LotteryEntrance() {
    const { chainId: chainIdHex, isWeb3Enabled } = useMoralis()
    const chainId = parseInt(chainIdHex)
    
    const raffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null
    const { entranceFee, setEntranceFee } = useState("0") // "setEntranceFee" is the function to update the "entranceFee"
    const { runContractFunction: getEntranceFee } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress,
        functionName: "getEntranceFee",
        params: {},
    })
    useEffect(() => {
        if (isWeb3Enabled) {
            async function updateUI() {
                const entranceFeeCall = (await getEntranceFee()).toString()
                setEntranceFee(entranceFeeCall)
                console.log(entranceFee)
            }
            updateUI()
        }
    }, [isWeb3Enabled])
    return (
        <div>
            Whateverererer<div>entranceFee</div>
        </div>
    )
}```
I am facing the same error but I used the "chainId" rather than "chainIdHex", still getting this error, can you help? 

[mmuaaz]

I am facing the same error but I used the "chainId" rather than "chainIdHex", still getting this error, can you help?

[albatros-github]

This error is because "sent" is either null or undefined and "sent" is generated apparently by moralis' function call to "getEntranceFee()" and the null/undef. could be because you are not connected with metamask to hardhat node/network.

So, verify if you have added hardhat network in Metamakask, use it and add one of the private keys of one of the addresses that "hardhat node" command prints in terminal and leave open and running the "hh node" connection in the terminal before you connect to the next.js "yarn run dev" localhost:3000 app

[nicolasCinzer]

This is not the error that hes facing... could be, but in this case is not.