Hardhat metamask error - "Trying to send a raw transaction with an invalid chainId. The expected chainId is 31337"

Question

I'm working with hardhat and ethers js. It's working fine when executing reading function but I'm getting this error while using writing function--

MetaMask - RPC Error: [ethjs-query] while formatting outputs from RPC '{"value":{"code":-32603,"data":{"code":-32602,"message":"Trying to send a raw transaction with an invalid chainId. The expected chainId is 31337","data":{"message":"Trying to send a raw transaction with an invalid chainId. The expected chainId is 31337"}}}}'

here's my code--

App.js

import './App.css'
import { ethers } from 'ethers'
import React, { useState, useEffect } from 'react'

function App() {

 const [participantName, setParticipantName] = useState()
 const [candidatesArray, setCandidatesArray] = useState([])

 const provider = new ethers.providers.Web3Provider(window.ethereum)
 const signer = provider.getSigner();
 const contractAddress = ""

 const abi = []

const contract = new ethers.Contract(contractAddress, abi, signer)

async function Connect() {
  if (window.ethereum) {
    try {
      await window.ethereum.request({ method: 'eth_requestAccounts' })
      console.log('connected')
     } catch (error) {
      console.log(error)
    }
  } 
}

async function Participate() {
  try {
    await contract.participate(participantName);
    console.log(participantName + " added successfully")
  
  } catch (error) {
  console.log(error)
  }
}

async function noOfCandidates() {
  const noCand = await contract.noOfCandidates();
  console.log(noCand.toString())
}

return (
  <div className="App">
    <h1>Election Poll</h1>
    <button onClick={Connect}>Connect</button>
    <div className="participate">
      <input type="text" onChange={(e)=>{setParticipantName(e.target.value)}}/>
      <button onClick={Participate}>Participate</button>
    </div>
    <div className="noOfCand">
      <button onClick={noOfCandidates}>Number of candidates running</button>
    </div>
    <div className="candArray">
      <h4>{candidatesArray}</h4>
    </div>
  </div>
)
}

export default App

deploy.js

const hre = require("hardhat");

async function main() {
const Election = await hre.ethers.getContractFactory("Election");
const election = await Election.deploy();

await election.deployed();

console.log("Election deployed to:", election.address);
}

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});

hardhat.config.js

require("@nomicfoundation/hardhat-toolbox");

/** @type import('hardhat/config').HardhatUserConfig */
module.exports = {
  solidity: "0.8.8",
  };

Thank you

Answer 1

Change the chainId within your metamask configuration to 31337 for your local network (eg http://localhost:8545)

Alternatively manually set the chainId within your hardhat config:

  networks: {
    hardhat: {
      url: process.env.RPC_URL,
      chainId: 1337,
    }
 }