Uncaught TypeError: _Web3Client__WEBPACK_IMPORTED_MODULE_1__.mintToken.then is not a function

Question

I am trying to integrate my smart contract with frontend react js but I am getting this error while using methods of the contract.

I got an error of react scripts version before so I installed a version less than 5 and now I am getting this error. Is it related? Please help .

Uncaught TypeError: _Web3Client__WEBPACK_IMPORTED_MODULE_1__.mintToken.then is not a function

App.js file

import React, { useEffect, useState } from 'react';
import { init, mintToken } from './Web3Client';
function App() {
  const [minted, setMinted] = useState(false);
  const mint = () => {
    mintToken
      .then((tx) => {
        console.log(tx);
        setMinted(true);
      })
      .catch((err) => {
        console.log(err);
      });
  };
  return (
    <div className="App">
      {!minted ? (
        <button onClick={() => mint()}>Mint Token</button>
      ) : (
        <p>Token Minted successfully</p>
      )}
    </div>
  );
}

export default App;

Web3Client.js File

import Web3 from 'web3';
import NFTContract from './NFT.json';
let selectedAccount;
let nftContract;
let isInitialized = false;
export const init = async () => {
  let provider = window.ethereum; //
  if (typeof provider !== 'undefined') {
    //metamask is installed
    provider
      .request({ method: 'eth_requestAccounts' })
      .then((accounts) => {
        selectedAccount = accounts[0];
        console.log(`selected account is ${selectedAccount}`);
      })
      .catch((err) => {
        console.log(err);
        return;
      });
    window.ethereum.on('accountsChanged', function (accounts) {
      selectedAccount = accounts[0];
      console.log(`Selected account changed to ${selectedAccount}`);
    });
  }
  const web3 = Web3(provider);
  const networkId = await web3.eth.net.getId();
  nftContract = new web3.eth.Contract(
    NFTContract.abi,
    NFTContract.networks[networkId].address
  );
  isInitialized = true;
};
export const mintToken = async () => {
  if (!isInitialized) {
    await init();
  }
  return nftContract.methods
    .mint(selectedAccount)
    .send({ from: selectedAccount });
};

NFT Contract

pragma solidity >=0.8.9;

import '@openzeppelin/contracts/token/ERC721/ERC721.sol';

contract NFT is ERC721 {
  constructor() ERC721('Coolest NFT', 'NFT') {}

  uint256 private _tokenId = 0;

  function mint() external returns (uint256) {
    _tokenId++;
    _mint(msg.sender, _tokenId);
    return _tokenId;
  }
}

Answer 1

.then() is a callback for promises, but your mintToken() method does not return a promise. You will need to do this instead:

export const mintToken = async () => {
  return new Promise(async(resolve,reject) => {
   if (!isInitialized) {
     await init();
   }

   const _txn = nftContract.methods
     .mint(selectedAccount)
     .send({ from: selectedAccount });

    resolve(_txn);
  });
};