call revert exception in using ether.js - reactjs

Question

i am setting up react with ether.js and smart contract is deployed using hardhat on localhost network. React app is connected to metasmask using
const provider = new ethers.providers.Web3Provider(window.ethereum);
the contract is written below
//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;
import "hardhat/console.sol";
contract Greeter {
string private greeting;
constructor(string memory _greeting) {
console.log("Deploying a Greeter with greeting:", _greeting);
greeting = _greeting;
}
function greet() public view returns (string memory) {
return greeting;
}
function setGreeting(string memory _greeting) public {
console.log("Changing greeting from '%s' to '%s'", greeting, _greeting);
greeting = _greeting;
}
}
i deployed this contract using npx hardhat run script.js.In the react code i am fetching contract object using
const erc20=new ethers.Contract(address,obj.abi,signer);
and in the useEffect i am trying to call erc20.greet()
which is giving error in console.
**
(in promise) Error: call revert exception (method="greet()", errorArgs=null, errorName=null, errorSignature=null, reason=null, code=CALL_EXCEPTION, version=abi/5.5.0)
**

Answer 1

You need to make sure these points:
Your Metamask extension is connecting to your hardhat localhost network.
When you run your React app in a browser with the Metamask extension installed, make sure that your Metamask is connecting to your hardhat localhost network (by default, it is localhost:8545). If Metamask is connecting to a different network, you will get that error.
(Note: Because the Metamask extension hides test networks by default, you will need to make it show test networks so that you can see your hardhat localhost network listed.)
Use the correct contract address.
When you start a hardhat local network, hardhat will return a list of accounts like this:
WARNING: These accounts, and their private keys, are publicly known. Any funds sent to them on Mainnet or any other live network WILL BE LOST.
Account #0: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266 (10000 ETH)
Private Key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80
Account #1: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 (10000 ETH)
Private Key: 0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d
...
When you deployed that smart contract using hardhat on localhost network, hardhat will return something like this:
[contract-name] deployed to: [contract-address]
Make sure that you use that [contract-address] as the value of the address argument here:
const erc20=new ethers.Contract(address,obj.abi,signer);
A [contract-address] and an account look quite similar, but they represent two different things. If you use an account instead the [contract-address], you will get the error.