在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()
函數向使用者顯示錯誤訊息。
P粉0813607752024-02-27 13:55:14
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
中新增後備解決它。