在ReactJS中使用ether庫取得錢包餘額時發生錯誤。正如我在標題中提到的。當我嘗試使用我執行 NPM 安裝的 ether 庫時，我遇到了一個奇怪的錯誤，在檢查本地主機時出現此錯誤：

這是我的錯誤訊息：

Compiled with problems:X

ERROR in ./node_modules/node-gyp-build/node-gyp-build.js 1:9-22

Module not found: Error: Can't resolve 'fs' in '/Users/gustavopayano/Desktop/navbar/node_modules/node-gyp-build'

ERROR in ./node_modules/node-gyp-build/node-gyp-build.js 2:11-26

Module not found: Error: Can't resolve 'path' in '/Users/gustavopayano/Desktop/navbar/node_modules/node-gyp-build'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

Module not found: Error: Can't resolve 'os' in '/Users/gustavopayano/Desktop/navbar/node_modules/node-gyp-build'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
    - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "os": false }

這是我的 ReactJS 元件，它實作了 Metamask 錢包連接程式碼：

import { React, useState } from "react";
import "./App";
import Navbar from "./Navbar";
import "./css/Metamask.css";

function Metamask() {
  const [errorMessage, setErrorMessage] = useState(null);
  const [defaultAccount, setDefaultAccount] = useState(null);
  const [userBalance, setUserBalance] = useState(null);

  const ethers = require("ethers");

  const connectWallet = () => {
    if (window.ethereum) {
      window.ethereum
        .request({ method: "eth_requestAccounts" })
        .then((result) => {
          accountChanged(result[0]);
        });
    } else {
      setErrorMessage("Install MetaMask Please!");
    }
  };

  const accountChanged = (accountName) => {
    setDefaultAccount(accountName);
    getUserBalance(accountName);
  };

  const getUserBalance = (accountAddress) => {
    window.ethereum
      .request({
        method: "eth_getBalance",
        params: [String(accountAddress), "latest"],
      })
      .then((balance) => {
        setUserBalance(ethers.utils.formatEther(balance));
      });
  };

  return (
    <div className="metamask">
      <Navbar />
      <h1>Metamask Wallet Connection</h1>
      <button class="btn btn-secondary btn-md" onClick={connectWallet}>
        {" "}
        Connect Metamask
      </button>
      <h3>Address: {defaultAccount}</h3>
      <h3>Balance: {userBalance}</h3>

      {errorMessage}
    </div>
  );
}

export default Metamask;

connectWallet() 函數檢查使用者瀏覽器中是否安裝了 Metamask 擴充功能。如果安裝了，它會向 Metamask 擴充功能發送請求以連接用戶的錢包。如果連線成功，則呼叫 accountChanged() 函數，該函數設定 defaultAccount 狀態，並呼叫 getUserBalance() 取得使用者錢包餘額。如果未安裝Metamask擴展，則會呼叫setErrorMessage()函數向使用者顯示錯誤訊息。