react 和 angular 中的错误库 web3 和 Webpack

Question

我使用“反应”：“^ 17.0.2”， 我试图通过 npm i web3 添加 web3 库 但是当我尝试像这样实例化我的 web3 对象时 web3 = new Web3((任何窗口).ethereum); 或者像这样 web3 = new Web3();

然后我尝试启动我的应用程序 (npm start)

我收到很多错误

• 关于我的 webpack 我必须在我的 webpack.config.js 中添加一些回退

Compiled with problems:

./node_modules/cipher-base/index.js 3:16-43 中的错误

找不到模块：错误：无法解析“流” 'C:...\node_modules\cipher-base'

重大变化：webpack < 5 用于包含 node.js 的 polyfill 默认情况下的核心模块。这已不再是这种情况。验证你是否 需要这个模块并为它配置一个 polyfill。

如果你想包含一个 polyfill，你需要：

• 添加后备 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
• 安装'stream-browserify' 如果您不想包含 polyfill，您可以使用这样的空模块：resolve.fallback：{ “流”：假}

./node_modules/eth-lib/lib/bytes.js 中的错误 9:193-227

找不到模块：错误：无法解析 ....

./node_modules/ethereumjs-util/dist.browser/account.js 中的错误 71:31-48

找不到模块：错误：无法解析...中的“断言”

./node_modules/ethereumjs-util/dist.browser/address.js 中的错误 14:31-48

找不到模块：错误：无法解析...中的“断言”错误 ./node_modules/ethereumjs-util/dist.browser/object.js 46:31-48

找不到模块：错误：无法解析...中的“断言”

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

找不到模块：错误：无法解析...中的“crypto”错误 ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js 7:193-227

找不到模块：错误：无法解析...中的“加密”

./node_modules/web3-providers-http/lib/index.js 30:11-26 中的错误

找不到模块：错误：无法在 ... 中解析“http”

./node_modules/web3-providers-http/lib/index.js 32:12-28 中的错误

找不到模块：错误：无法在...中解析“https”

./node_modules/xhr2-cookies/dist/xml-http-request.js 37:11-26 中的错误

找不到模块：错误：无法在 ... 中解析“http”

./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28 中的错误

找不到模块：错误：无法在...中解析“https”

./node_modules/xhr2-cookies/dist/xml-http-request.js 41:9-22 中的错误

找不到模块：错误：无法解析“操作系统” 'C:...\node_modules\xhr2-cookies\dist'

重大变化：webpack < 5 用于包含 node.js 的 polyfill 默认情况下的核心模块。这已不再是这种情况。验证您是否 需要这个模块并为它配置一个 polyfill。

如果你想包含一个 polyfill，你需要：

• 添加后备 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
• 安装'os-browserify' 如果您不想包含 polyfill，您可以使用这样的空模块：resolve.fallback: { "os": 错误的 }

• 很多这样的错误：无法从“C:....\node_modules\xhr2-cookies\xml-http-request-upload.ts”文件解析源映射：错误：ENOENT：没有这样的文件或目录

./node_modules/@ethersproject/abi/lib.esm/coders/fixed-bytes.js 模块中的警告 警告（来自 ./node_modules/source-map-loader/dist/cjs.js）：未能 从中解析源映射 'C:...\node_modules@ethersproject\abi\src.ts\coders\fixed-bytes.ts' 文件：错误：ENOENT：没有那个文件或目录，打开 'C:...\node_modules@ethersproject\abi\src.ts\coders\fixed-bytes.ts' @ ./node_modules/@ethersproject/abi/lib.esm/abi-coder.js 13:0-55 76:17-32 @./node_modules/@ethersproject/abi/lib.esm/index.js 4:0-56 6:0-204 6:0-204 @ ./node_modules/web3-eth-abi/lib/index.js 28:21-59 30:16-55 @ ./node_modules/web3-eth/lib/index.js 47:10-33 @ ./node_modules/web3/lib/index.js 34:10-29 @ ./src/components/Authenticate.tsx 7:0-24 14:19-23 14:24-42 @ ./src/App.tsx 5:0-53 10:35-47 @ ./src/index.tsx 7:0-24 11:33-36

./node_modules/@ethersproject/abi/lib.esm/coders/null.js 中的警告 模块警告（来自 ./node_modules/source-map-loader/dist/cjs.js）： 无法从中解析源映射 'C:...\node_modules@ethersproject\abi\src.ts\coders\null.ts' 文件：错误：ENOENT：没有那个文件或目录，打开 'C:...\node_modules@ethersproject\abi\src.ts\coders\null.ts' @ ./node_modules/@ethersproject/abi/lib.esm/abi-coder.js 14:0-42 50:19-28 @ ./node_modules/@ethersproject/abi/lib.esm/index.js 4:0-56 6:0-204 6:0-204 @ ./node_modules/web3-eth-abi/lib/index.js 28:21-59 30:16-55 @ ./node_modules/web3-eth/lib/index.js 47:10-33 @ ./node_modules/web3/lib/index.js 34:10-29 @ ./src/components/Authenticate.tsx 7:0-24 14:19-23 14:24-42 @ ./src/App.tsx 5:0-53 10:35-47 @ ./src/index.tsx 7:0-24 11:33-36

我使用了 npx create-react-app Appname --template typescript 给出的基本模板 然后添加 web3 库 (npm i web3)

并尝试了这段代码

从“反应”中导入反应，{useState}； 从“@metamask/detect-provider”导入 detectEthereumProvider 从“web3”导入 Web3；

const 验证 = () => {

const web3 = new Web3();

}

return (
    <div>
        TEST
    </div >
);

};

导出默认验证；

Answer 1

安装反应脚本@4.0.3

npm install --save react-scripts@4.0.3