Lesson 10 yarn build error

[armontej]

I am trying to follow along with the IPFS part of lesson 10, when i go to run yarn build i run into this errors

armon@DESKTOP-TK7T6N9 MINGW64 ~/nextjs-smartcontract-lottery-fcc (main)
$ yarn build
yarn run v1.22.15
$ next build

./components/LotteryEntrance.js
68:8 Warning: React Hook useEffect has a missing dependency: 'updateUI'. Either include it or remove the dependency array. react-hooks/exhaustive-deps

./components/ManualHeader.jsx
16:8 Warning: React Hook useEffect has a missing dependency: 'enableWeb3'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
27:8 Warning: React Hook useEffect has missing dependencies: 'Moralis' and 'deactivateWeb3'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
info - Linting and checking validity of types
info - Creating an optimized production build ..

and the Creating an optimized production build.... part keeps flashing

[krakxn]

Can you push to a remote repo and send the link - thanks.

[krakxn]

thank you i can redo it

Okay, so did you complete the lesson entirely? Because these warnings are not critical which would change the desirable result - it is only letting us know that the program can be more efficient.

[krakxn]

Copy these, I edited your code by adding dependencies:

First: LotteryEntrance.js

// have a function to enter the lottery
import { useWeb3Contract } from "react-moralis"
import { abi, contractAddresses } from "../constants"
import { useMoralis } from "react-moralis"
import { useEffect, useState } from "react"
import { ethers } from "ethers"
import { useNotification } from "web3uikit"

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")
    const [numPlayers, setNumPlayers] = useState("0")
    const [recentWinner, setRecentWinner] = useState("0")

    const dispatch = useNotification()

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

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

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

    const { runContractFunction: getRecentWinner } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress, // specify networkId
        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)
    }

    // useEffect runs right when something changes // rerenders browser
    useEffect(() => {
        if (isWeb3Enabled) {
            // try to read the raffle entrance fee

            updateUI()
        }
    }, [isWeb3Enabled, updateUI])

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

    const handleNewNotification = function () {
        dispatch({
            type: "info",
            message: "Transaction Complete!",
            title: "Tx Notification",
            position: "topR",
            icon: "bell",
        })
    }

    return (
        <div className="p-5">
            Hi From Lottery Entrance!
            {raffleAddress ? (
                <div className="">
                    <button
                        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-auto"
                        onClick={async function () {
                            await enterRaffle({
                                onSuccess: handleSuccess,
                            })
                        }}
                        disabled={isLoading || isFetching}
                    >
                        {isLoading || isFetching ? (
                            <div className="animate-spin spinner-border h-8 w-8 border-b-2 rounded-full"></div>
                        ) : (
                            <div>Enter Raffle</div>
                        )}
                    </button>
                    <div> Entrance Fee: {ethers.utils.formatUnits(entranceFee, "ether")} ETH</div>
                    <div>Number Of Players: {numPlayers} </div>
                    <div>Recent Winner: {recentWinner}</div>
                </div>
            ) : (
                <div> No Raffle Address Detected</div>
            )}
        </div>
    )
}

Second: ManualHeader.jsx

import { useMoralis } from "react-moralis"
import { useEffect } from "react"

export default function ManualHeader() {
    const { enableWeb3, account, isWeb3Enabled, Moralis, deactivateWeb3, isWeb3EnableLoading } =
        useMoralis()

    useEffect(() => {
        if (isWeb3Enabled) return
        if (typeof window !== "undefined") {
            if (window.localStorage.getItem("connected")) {
            }
        }
    }, [isWeb3Enabled])

    useEffect(() => {
        Moralis.onAccountChanged((account) => {
            console.log("Account changed to ${account}")
            if (account == null) {
                window.localStorage.removeItem("connected")
                deactivateWeb3()
                console.log("Null account found")
            }
        })
    }, [Moralis, deactivateWeb3])

    return (
        <div>
            {account ? (
                <div>
                    Connected to {account.slice(0, 6)}...{account.slice(account.length - 4)}
                </div>
            ) : (
                <button
                    onClick={async () => {
                        await enableWeb3()
                        if (typeof window !== "undefined")
                            window.localStorage.setItem("connected", "injected")
                    }}
                    disabled={isWeb3EnableLoading}
                >
                    Connect
                </button>
            )}
        </div>
    )
}

Does this fix the warnings now? Let me know.

[krakxn]

@armontej Did you do the above?

[armontej]

yes i also did this to get rid of the warnings

[krakxn]

Did getting rid of the warnings solve your problem?

[baocongchen]

useEffect(() => {
    Moralis.onAccountChanged((account) => {
        console.log("Account changed to ${account}")
        if (account == null) {
            window.localStorage.removeItem("connected")
            deactivateWeb3()
            console.log("Null account found")
        }
    })
}, [Moralis, deactivateWeb3])

There you go, @armontej .

[armontej]

@krakxn so i am not able to complete the lesson because when i run yarn build in the terminal it never finishes, the "Creating an optimized production build..." just keeps flashing

[armontej]

figured out why the creating optomized build would hang it was becausae i had the server still open, thank you for your help guys @krakxn @baocongchen