React JSでイーサリアムライブラリを使用してウォレット残高を取得中にエラーが発生しました

Question

ReactJS の

ether ライブラリを使用してウォレット残高を取得中に エラーが発生しました。タイトルにも書きましたが。 NPM インストールを行った ether ライブラリを使用しようとしたとき、奇妙なエラーが発生しました。localhost をチェックすると、次のエラーが発生しました:

これは私のエラーメッセージです:

リーリー

これは、メタマスク ウォレット接続コードを実装する私の ReactJS コンポーネントです:

リーリー

connectWallet() この関数は、メタマスク拡張機能がユーザーのブラウザにインストールされているかどうかを確認します。インストールされている場合、メタマスク拡張機能にリクエストを送信して、ユーザーのウォレットに接続します。接続が成功すると、accountChanged() 関数が呼び出され、defaultAccount 状態が設定され、getUserBalance() を呼び出してユーザーのウォレット残高を取得します。 Metamask 拡張機能がインストールされていない場合は、setErrorMessage() 関数が呼び出され、ユーザーにエラー メッセージが表示されます。

Answer 1

1. これらを devDependency に追加し、 yarn/npm install を実行します。

"開発依存関係": {
"アサート": "^2.0.0",
"バッファ": "^6.0.3",
"crypto-browserify": "^3.12.0",
"https-browserify": "^1.0.0",
"os-browserify": "^0.3.0",
"プロセス": "^0.11.10",
"react-app-rewired": "^2.2.1",
"stream-browserify": "^3.0.0",
"ストリーム-http": "^3.2.0",
"url": "^0.11.0"}

2. npm install (またはyarn) を実行して、すべての依存関係がダウンロードされていることを確認します。

3. package.json 内のスクリプトを、react-app-rewired で実行するように変更します:

"start": "react-app-rewired 開始",
"ビルド": "react-app-rewired ビルド",
"テスト": "react-app-rewired テスト",
"取り出し": "react-app-rewired 取り出し"

4. ルート フォルダーに config.overrides.js を作成し、次の内容をコピーして貼り付けます。

const webpack = require("webpack"); module.exports = 関数オーバーライド(config) { const fallback = config.resolve.fallback || {}; Object.assign(フォールバック, { 暗号: require.resolve("crypto-browserify"), ストリーム: require.resolve("stream-browserify"), アサート: 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 = フォールバック; config.plugins = (config.plugins || []).concat([ 新しい webpack.ProvidePlugin({ プロセス: "プロセス/ブラウザ", バッファ: ["バッファ", "バッファ"], })、 ]); 構成を返します。 };

5. 他にエラーがある場合は、必ず

config.overrides.js にフォールバックを追加して解決してください。