TypeError: Cannot use 'in' operator to search for 'null' in undefined

[SamarthBagga]

complete error-

TypeError: Cannot use 'in' operator to search for 'null' in undefined
   7 |     const { chainId: chainIdHex, isWeb3Enabled } = useMoralis()
   8 |     const chainId = parseInt(chainIdHex)
>  9 |     const raffleAddress = chainIdHex in contractAddress ? contractAddress[chainId][0] : null
     |                                    ^
  10 |     const [entranceFee, setEntranceFee] = useState("0")
  11 | 
  12 |     const { runContractFunction: enterRaffle } = useWeb3Contract({
wait  - compiling...
warn  - ./node_modules/moralis-v1/lib/browser/Web3Connector/MagicWeb3Connector.js
Module not found: Can't resolve 'magic-sdk' in '/home/samarth/web3/nextjs-smartcontract-lottery/node_modules/moralis-v1/lib/browser/Web3Connector'

./node_modules/moralis-v1/lib/browser/Web3Connector/WalletConnectWeb3Connector.js

code-

import { useWeb3Contract } from "react-moralis"
import { abi, contractAddress } from "../constants"
import { useMoralis } from "react-moralis"
import { useEffect, useState } from "react"
import { ethers } from "ethers"
export default function LotteryEntrance() {
    const { chainId: chainIdHex, isWeb3Enabled } = useMoralis()
    const chainId = parseInt(chainIdHex)
    const raffleAddress = chainIdHex in contractAddress ? contractAddress[chainId][0] : null
    const [entranceFee, setEntranceFee] = useState("0")

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

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

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

    return (
        <div>
            Hi from lottery entrance!
            {raffleAddress ? (
                <div>
                    <button onClick={async function(){await enterRaffle()}}>Enter Raffle</button>
                    Entrance Fee {ethers.utils.formatUnits(entranceFee, "ether")} ETH
                </div>
            ) : (
                <div>No Raffle Address Detected.</div>
            )}
        </div>
    )
}

[Adelani10]

Change the 9th line to:-

const raffleAddress = chainId in contractAddress ? contractAddress[chainId][0] : null

[SamarthBagga]

@Adelani10 now i am getting -

TypeError: Cannot use 'in' operator to search for 'NaN' in undefined

[Adelani10]

try to erase your contractAddress and abi file and push it again from the backend with yarn hardhat node. Make sure your contractAddress file has an address in it wirh chainId 31337

[SamarthBagga]

@Adelani10 it still didnt work

[Adelani10]

In your /components/index.js file in the frontend, you're exporting "contractAddresses" but in your LotteryEntrance file, you're importing "contractAddress". Make it correlate and see if the issue persists. So it should be:-

import { abi, contractAddresses } from "../constants"

then

const raffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null

[SamarthBagga]

@Adelani10 yes it worked thank you!