將 web3 導入 app.js 時出現許多錯誤

Question

嘗試將 web3 導入 App.js 時出現 9 個錯誤

import React from "react";
import Web3 from "web3";

function App() {
  return (
    <div className="App">
      <h1>TEST APP</h1>
    </div>
  );
}

export default App;

編譯有問題：X

/node_modules/cipher-base/index.js 3:16-43 中的錯誤

找不到模塊：錯誤：無法解析“/home/galich/Desktop/projects/mp-test/node_modules/cipher-base”中的“流”

重大更改：webpack < 5 用於默認包含 node.js 核心模塊的 polyfill。 這已不再是這種情況。 驗證你是否需要這個模塊並為它配置一個 polyfill。

如果你想包含一個 polyfill，你需要： - 添加一個后備 'resolve.fallback: { "stream": require.resolve("stream-browserify") }' - 安裝 'stream-browserify' 如果你不想要包含一個 polyfill，你可以使用這樣的空模塊：resolve.fallback: { "stream": false }

/node_modules/eth-lib/lib/bytes.js 9:193-227 中的錯誤

找不到模塊：錯誤：無法解析“/home/galich/Desktop/projects/mp-test/node_modules/eth-lib/lib”中的“crypto”

重大更改：webpack < 5 用於默認包含 node.js 核心模塊的 polyfill。 這已不再是這種情況。 驗證你是否需要這個模塊並為它配置一個 polyfill。

如果你想包含一個 polyfill，你需要： - 添加一個后備 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - 安裝 'crypto-browserify' 如果你不想要包含一個 polyfill，你可以使用這樣的空模塊：resolve.fallback: { "crypto": false }

/node_modules/web3-eth-accounts/lib/index.js 31:74-91 中的錯誤

找不到模塊：錯誤：無法解析“/home/galich/Desktop/projects/mp-test/node_modules/web3-eth-accounts/lib”中的“crypto”

等等

Answer 1

第一個選項：

使用npm install react-app-rewired node-polyfill-webpack-plugin或yarn add react-app-rewired node-polyfill-webpack-plugin polyfill-webpack-plugin 安裝NodePolyfillPlugin和react-app- rewired。

現在將"start": "react-scripts start"更改為"start": "react-app-rewired start" 。

創建一個文件“config-overrides.js”並在其中寫入以下代碼：

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = function override(config, _env) {
  config.plugins.push(
    new NodePolyfillPlugin({
      excludeAliases: ["console"],
    })
  );
  return config;
};

現在做"npm start"和Hurray

第二個選項：

而不是像這樣導入：

import Web3 from "web3";

像這樣導入：

import Web3 from "web3/dist/web3.min.js";

這也將解決您的問題。