在react js中使用以太库获取钱包余额时出错

Question

在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()函数向用户显示错误消息。

Answer 1

1.将这些添加到您的 devDependencies 并运行 yarn/npm install 。

"devDependencies": {
"assert": "^2.0.0",
"buffer": "^6.0.3",
"crypto-browserify": "^3.12.0",
"https-browserify": "^1.0.0",
"os-browserify": "^0.3.0",
"process": "^0.11.10",
"react-app-rewired": "^2.2.1",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"url": "^0.11.0"}

2.运行npm install（或yarn）以确保下载所有依赖项。

3.更改 package.json 中的脚本以使用react-app-rewired运行：

"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"

4.在根文件夹中创建 config.overrides.js 并将以下内容复制并粘贴到其中：

const webpack = require("webpack");

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    crypto: require.resolve("crypto-browserify"),
    stream: require.resolve("stream-browserify"),
    assert: require.resolve("assert"),
    http: require.resolve("stream-http"),
    https: require.resolve("https-browserify"),
    os: require.resolve("os-browserify"),
    url: require.resolve("url"),
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    }),
  ]);
  return config;
};

5.如果有任何其他错误，请确保在 config.overrides.js 中添加后备解决它。