未捕获的类型错误：https.Agent 不是构造函数

Question

我正在使用react开发一个dapp，当我尝试使用HTTPS或HTTP的RPC实例化web3时出现错误。

错误如下：

未捕获的类型错误：https.Agent 不是构造函数

经过一些研究，我已经能够验证该错误来自 web3-providers-http 模块。

预期行为 当我配置 Metamask 提供程序 (window.ethereum) 时，一切正常。因为我可以进行写入和读取事务，在区块链上没有问题。我希望它能够正常工作，没有错误，并且可以进行交易。

重现步骤

var Web3 = require('web3');
var provider = 'https://mainnet.infura.io/v3/<PROJECT-ID>';
var web3Provider = new Web3.providers.HttpProvider(provider);
var web3 = new Web3(web3Provider);
web3.eth.getBlockNumber().then((result) => {
  console.log("Latest Ethereum Block is ",result);
});

Web3.js 版本 1.7.4

维特版本3.0.0

环境 操作系统：macOs 11.5.2 浏览器：Chrome、Firefox Node.js 版本：v12.22.0 NPM 版本：7.7.6

Answer 1

问题出在 http 代理上，因为 vite 没有添加 polyfill 或者没有链接

这是我找到的解决方案

• 使用yarn add stream-browserify agent-base或添加代理库npm -i stream-browserify agent-base
• 如下更新您的 vite.config.js

import GlobalsPolyfills from '@esbuild-plugins/node-globals-polyfill'

export default defineConfig({
...
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: 'globalThis',
      },
      plugins: [
        GlobalsPolyfills({
          process: true,
          buffer: true,
        }),
      ],
    },
  },
  resolve: {
    alias: {
      stream: 'stream-browserify',
      https: 'agent-base', 
      // comment above line and uncomment below line if it doesnot work
      //     http:'agent-base',
    },
  },
...
)}

另一个解决方案 - 2 ：您可以使用etherspackage 而不是 web3，因为它不依赖于 http 代理

import { ethers, Contract, Wallet, getDefaultProvider } from 'ethers';
import ZntLockerLens from './ZntLockerLens';

    const provider = new ethers.providers.JsonRpcProvider(
      'https://http-testnet.xx.com',
    );
    const contract = new Contract(
      '0x492B7bCD1732FBB8297a24694dxx6B3FEDCA9D0A',
      ZntLockerLens.abi,
      provider,
    );
    (async () => {
      const result = await contract.getLockInfo(
        '0xC02a0c4634B4f2aF73Bb29bxx1153E791AdB7D1e',
      );
      console.log(result);
    })();