reactjs - Fejl ved brug af Web3.js med Vite og TypeScript i et React.js-projekt: "Modul 'events' er blevet externaliseret for browserkompatibilitet"

Jeg udvikler et React.js-projekt med TypeScript, som håndteres med Vite, og jeg støder på et problem, når jeg prøver at integrere Web3.js til kommunikation med Ethereum Smart Contracts. Projektet er opsat til at oprette forbindelse til en lokal Ethereum-blockchain, der kører på Ganache på http://localhost:7545.

Jeg installerede Web3.js ved at bruge npm install web3 og forsøgte at oprette en Web3-instans sådan her:

import Web3 from 'web3';

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

Men så snart jeg kalder nogen Web3.js-funktioner, såsom const web3=new Web3(Web3.givenProvider || 'http://localhost:7545'); eller Web3.version, får jeg følgende advarsler og fejl i konsollen:

  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

Dette er et React.js-projekt, der administreres med Vite, og jeg har begrænset erfaring med moderne frontend-teknologistakke. Jeg spekulerer på, om der er yderligere konfigurationer eller opsætninger, jeg skal udføre for at integrere Web3.js i mit frontend-projekt med succes.

Enhver vejledning, forslag eller indsigt i, hvordan man løser disse problemer og korrekt konfigurerer Web3.js i mit React.js/Vite/TypeScript-projekt, vil blive meget værdsat.

Svar #1

Da browsere ikke understøtter Nodes kerne-moduler, skal pakker, der bruger dem, polyfilles for at fungere i browser-miljøer. I et forsøg på at forhindre runtime-fejl, producerer Vite fejl eller advarsler, når din kode refererer til indbyggede moduler som fs eller path.

Du mangler node-polyfills. Du kan tilføje dette ved at installere vite-plugin-node-polyfills og tilføje events-polyfill til din vite.config. Følg blot README på npm-siden, og du burde være okay.

Svar #2

For fuldstændighedens skyld er her de trin, der løste mit problem for fællesskabet:

  1. Kør i projektbiblioteket npm install --save-dev vite-plugin-node-polyfills for at installere vite-plugin-node-polyfills.
  2. Tilføj nodePolyfills-plugin'et i din vite.config.ts-fil:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import {nodePolyfills} from 'vite-plugin-node-polyfills';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), nodePolyfills()],
})

Relaterede artikler