本地站点对接MetaMask钱包报错：'args.method'必须为非空字符串

问题现象 #

• 本地站点与MetaMask钱包对接时出现错误
• 调用eth_requestAccounts方法时触发该错误

控制台错误信息 #

inpage.js:8 Uncaught (in promise) Error: 'args.method' must be a non-empty string.
    at o (inpage.js:8:31826)
    at Object.invalidRequest (inpage.js:8:32276)
    at l.request (inpage.js:1:37391)
    at HTMLButtonElement.Connect (index.js:13:27)

相关代码 #

index.js

// HOW TO CONNECT YOUR METAMASK TO YOUR FRONTEND

const button = document.getElementById("ConnectButton");
//button.addEventListener('click',connect);
if (button) {
  console.log("button successfully imported");
} else {
  console.log("BUtton is not imported");
}

const Connect = async () => {
  if (typeof window.ethereum !== "undefined") {
    await window.ethereum.request({ methord: "eth_requestAccounts" });

    button.innerHTML = "Connected";
  } else {
    button.innerHTML = "Pls install metamask";
  }
};

button.addEventListener("click", Connect);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FUND ME</title>
</head>
<body>
    <h1>HELLO WORLD
    </h1>
    <button id="ConnectButton">Connect</button>
    <script src="index.js"></script>
</body>
</html> 

解决方案 #

错误原因是拼写错误：调用window.ethereum.request时，参数名method被误写为methord，导致MetaMask无法识别请求的方法名，进而抛出该错误。

修正后的Connect函数代码：

const Connect = async () => {
  if (typeof window.ethereum !== "undefined") {
    // 修正拼写错误：methord → method
    await window.ethereum.request({ method: "eth_requestAccounts" });

    button.innerHTML = "Connected";
  } else {
    button.innerHTML = "Pls install metamask";
  }
};

内容的提问来源于stack exchange，提问作者Abhishek Yadav