在 React.js 项目中使用 Web3.js 与 Vite 和 TypeScript 时出现错误：“模块‘事件’已被外部化以实现浏览器兼容性”

Question

我正在开发一个由 Vite 管理的 TypeScript 的 React.js 项目，在尝试集成 Web3.js 以与以太坊智能合约通信时遇到问题。该项目旨在连接到在 Ganache 上运行的本地以太坊区块链，地址为

http://localhost:7545

。

我使用

npm install web3

安装了 Web3.js 并尝试创建一个如下所示的 Web3 实例：

import Web3 from 'web3';

const web3 = new Web3(Web3.givenProvider || 'http://localhost:7545');

但是，一旦我调用任何 Web3.js 函数，例如

const web3 = new Web3(Web3.givenProvider || 'http://localhost:7545');

或

Web3.version

，我就会在控制台中收到以下警告和错误：

1. Module "events" has been externalized for browser compatibility. Cannot access "events.EventEmitter" in client code. See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

2. Uncaught TypeError: Class extends value undefined is not a constructor or null at common.ts:58:29 (anonymous) @ common.ts:58

这是一个由 Vite 管理的 React.js 项目，我对现代前端技术堆栈的经验有限。我想知道是否需要执行其他配置或设置才能将 Web3.js 成功集成到我的前端项目中。

任何关于如何解决这些问题并在我的 React.js/Vite/TypeScript 项目中正确配置 Web3.js 的指导、建议或见解将不胜感激。

Answer 1

由于浏览器不支持 Node 的核心模块，因此使用它们的包必须进行填充才能在浏览器环境中运行。为了防止运行时错误，当您的代码引用 fs 或 path 等内置模块时，Vite 会产生错误或警告。

您缺少节点 polyfill。您可以通过安装 vite-plugin-node-polyfills 并将

events

polyfill 添加到您的

vite.config

来添加它。只需按照 npm 页面上的 README 操作就可以了。