Ralat semasa mendapatkan baki dompet menggunakan perpustakaan ethereum dalam react js

Question

Ralat semasa mendapatkan baki dompet menggunakan perpustakaan ether dalam ReactJS. Seperti yang saya sebutkan dalam tajuk. Apabila saya cuba menggunakan perpustakaan ether yang saya lakukan pemasangan NPM, saya mengalami ralat pelik, apabila menyemak localhost saya mendapat ralat ini:

Ini ialah mesej ralat saya:

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 }

Ini ialah komponen ReactJS saya yang melaksanakan kod sambungan dompet 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;

Fungsi

connectWallet() 函数检查用户浏览器中是否安装了 Metamask 扩展。如果安装了，它会向 Metamask 扩展发送请求以连接用户的钱包。如果连接成功，则调用 accountChanged() 函数，该函数设置 defaultAccount 状态，并调用 getUserBalance() 获取用户钱包余额。如果未安装Metamask扩展，则会调用setErrorMessage() memaparkan mesej ralat kepada pengguna.

Answer 1

1. Tambahkan ini pada devDependencies 并运行 yarn/npm install anda.

"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. Jalankan npm install（或yarn） untuk memastikan semua kebergantungan dimuat turun.

3 Tukar skrip dalam package.json untuk dijalankan dengan react-app-rewired:

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

4. Cipta config.overrides.js dalam folder akar dan salin dan tampal kandungan berikut ke dalamnya:

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 Jika terdapat sebarang ralat lain, pastikan anda menambah sandaran dalam config.overrides.js untuk menyelesaikannya.