Fehler beim Abrufen des Wallet-Guthabens mithilfe der ether-Bibliothek in ReactJS. Wie ich im Titel erwähnt habe. Als ich versuchte, die ether-Bibliothek zu verwenden, die ich per NPM installiert hatte, stieß ich auf einen seltsamen Fehler. Als ich „localhost“ überprüfte, bekam ich diesen Fehler:
Das ist meine Fehlermeldung:
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 }
Dies ist meine ReactJS-Komponente, die den Metamask-Wallet-Verbindungscode implementiert:
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;Die Funktion
connectWallet()
函数检查用户浏览器中是否安装了 Metamask 扩展。如果安装了,它会向 Metamask 扩展发送请求以连接用户的钱包。如果连接成功,则调用 accountChanged()
函数,该函数设置 defaultAccount
状态,并调用 getUserBalance()
获取用户钱包余额。如果未安装Metamask扩展,则会调用setErrorMessage()
zeigt dem Benutzer eine Fehlermeldung an.
1.将这些添加到您的
devDependencies
并运行yarn/npm install
。2.运行
npm install(或yarn)
以确保下载所有依赖项。3.更改
package.json
中的脚本以使用react-app-rewired运行:4.在根文件夹中创建
config.overrides.js
并将以下内容复制并粘贴到其中:5.如果有任何其他错误,请确保在
config.overrides.js
中添加后备解决它。