NFT token undefined

Question

I'm developing a lazy minting website, which is deployed to Mumbai network. But the token id return undefined.

Minter.jsx

async function mintNFT({ contract, ownerAddress, provider, gasPrice, setStatus, image, name, description }) {

  // First we use the nft.storage client library to add the image and metadata to IPFS / Filecoin
  const client = new NFTStorage({ token: NFT_STORAGE_KEY });
  setStatus("Uploading to nft.storage...")
  const metadata = await client.store({
    name,
    description,
    image,
  });
  setStatus(`Upload complete! Minting token with metadata URI: ${metadata.url}`);

  // the returned metadata.url has the IPFS URI we want to add.
  // our smart contract already prefixes URIs with "ipfs://", so we remove it before calling the `mintToken` function
  const metadataURI = metadata.url.replace(/^ipfs:\/\//, "");
  console.log("MetaData URI "+metadataURI);  

  // get metadata hash replace 1
  const lazyMinter = new LazyMinter({ contract, signer: ownerAddress })
  const voucher =  lazyMinter.createVoucher(1, metadata.url)
  console.log("Token Id  "+voucher.tokenId);
  return voucher.tokenId;
}

LazyMinter.js

/**
   * Creates a new NFTVoucher object and signs it using this LazyMinter's signing key.
   * 
   * @param {ethers.BigNumber | number} tokenId the id of the un-minted NFT
   * @param {string} uri the metadata URI to associate with this NFT
   * @param {ethers.BigNumber | number} minPrice the minimum price (in wei) that the creator will accept to redeem this NFT. defaults to zero
   * 
   * @returns {NFTVoucher}
   */
  async createVoucher(tokenId, uri, minPrice = 0) {
    const voucher = { tokenId, uri, minPrice }
    const domain = await this._signingDomain()
    const types = {
      NFTVoucher: [
        { name: "tokenId", type: "uint256" },
        { name: "minPrice", type: "uint256" },
        { name: "uri", type: "string" },
      ]
    }
    const signature = await this.signer._signTypedData(domain, types, voucher);
    return {
      ...voucher,
      signature,
    }
  }

  /**
   * @private
   * @returns {object} the EIP-721 signing domain, tied to the chainId of the signer
   */
  async _signingDomain() {
    if (this._domain != null) {
      console.log("it s not null");
      return this._domain
    }
    console.log("The contract is " + this.contract);
    console.log("chain id " + this.contract.getChainID())
    const chainId = await this.contract.getChainID();
    console.log("chain id " + chainId);
    this._domain = {
      name: SIGNING_DOMAIN_NAME,
      version: SIGNING_DOMAIN_VERSION,
      verifyingContract: this.contract.address,
      chainId,
    }
    return this._domain
  }

Console output

Edit

After added async in front, I get this error in frontend:

Unhandled Rejection (Error): call revert exception (method="getChainID()", errorArgs=null, errorName=null, errorSignature=null, reason=null, code=CALL_EXCEPTION, version=abi/5.2.0)

This is the console log displayed in _signingDomain method.

The contract is [object Object]
LazyMinter.js:70 chain id [object Promise]

Answer 1

const voucher = lazyMinter.createVoucher(1, metadata.url)

Here you are calling an asynchronous function without telling the thread to wait for the result.

const voucher = await lazyMinter.createVoucher(1, metadata.url)

As you have added a couple of awaits in the code, the above solution would be the simplest. Also you can use a promise or rxjs based solution.