Update-front-end script doesnt update for Rinkeby

[aranyadan]

Hi, I was going through lesson 10: NextJS Smart Contract Lottery where we wrote the script to update the nextjs folder with the abi and the contract address of the deployed contracts.

However, this update only happens when I run
hh node

If I deploy on any network, like rinkeby with
hh deploy --network rinkeby

It says "Front end written" but doesnt write anything and the files are blank (both abi and address)

On running it through the debugger, I see that the code drops out of the function updateContractAddresses when it reaches the ethers.getContract function without running any further statements (the file write statements).

Function for reference:

async function updateContractAddresses() {
    const raffle = await ethers.getContract("Raffle")
    const contractAddresses = JSON.parse(fs.readFileSync(frontEndContractsFile, "utf8"))
    if (network.config.chainId.toString() in contractAddresses) {
        if (!contractAddresses[network.config.chainId.toString()].includes(raffle.address)) {
            contractAddresses[network.config.chainId.toString()].push(raffle.address)
        }
    } else {
        contractAddresses[network.config.chainId.toString()] = [raffle.address]
    }
    fs.writeFileSync(frontEndContractsFile, JSON.stringify(contractAddresses))
}

Ran this on a fresh clone from the repo, so the issue exists in its current state.

Way to replicate:

1. Clone the repo
2. Add your .env
3. hh deploy --network rinkeby
4. check files specified in the path in helper file for contract address and abi to be written to

How do we copy over address/abi from testnet/mainnet deployments?

Update:
On running
hh console --network rinkeby

and then
(await ethers.getContract("Raffle")).address

I get the correct address. For some reason, the contract cannot be retrieved in the script, but can be retrieved in the console?

[AlexS3abo]

Had the same problem. I have added await statements like so and it updated:

module.exports = async function () {
    if (process.env.UPDATE_FRONT_END) {
        console.log("Updating front end...")
        await updateContractAddresses()
        await updateAbi()
        console.log("Front end written!")
    }
}

Let me know if this is wrong or bad coding practice (so I can run it differently). But it works.

[aranyadan]

great! thanks a lot. since they are async functions, they should have await i think. missed it

[chuukwuemeka]

I was just looking for this solution...thank you so much!