reactjs - Cum pot folosi Buffer și process într-o aplicație Vite?

Folosesc wagmi într-o aplicație React cu TypeScript configurată de Vite.

Am avut o problemă ex:

"global nu este definit", "buffer nu este definit"

Și am încercat din nou cu niște cod în main.tsx:

import { Buffer } from 'buffer';
import process from 'process';

window.global = window;
window.Buffer = Buffer;
window.process = process;

Dar încă primesc unele erori, de exemplu: "Modulul \"process\" a fost externalizat pentru compatibilitatea cu browserul. Nu se poate accesa \"process.versions\" în codul client."

Va apărea o eroare atunci când mă conectez la connectorul Coinbase sau WalletConnect.

Fișierul meu vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
//import Buffer from 'buffer';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 5000,
  },
  resolve: {
    alias: [{ find: '@', replacement: '/src' }],
  },
  define: {
    // global: 'window',
    // Buffer: Buffer,
    // process: process,
  },
});

Răspuns #1

Mulți oameni pun aceeași întrebare aici, dar nu pot găsi un răspuns adecvat. Totuși, am descoperit răspunsul perfect acum câteva zile.

uneori întâlnim eroarea "process is not defined" în aplicația Vite. Asta se datorează faptului că Vite nu polyfill-ează automat modulele Node.js.

https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility

Răspuns este https://www.npmjs.com/package/vite-plugin-node-polyfills

spune

Deoarece browserele nu suportă Modulele de bază ale Node, pachetele care le folosesc trebuie să fie completate cu polyfill pentru a funcționa în mediile de browser. Într-o încercare de a preveni erorile la rulare, Vite generează erori sau avertismente atunci când codul tău face referire la module încorporate precum fs sau path.

Soluție:

1. Instalează pachetul ca o dependență de dezvoltare.

npm install --save-dev vite-plugin-node-polyfills

2. Adaugă pluginul în fișierul tău vite.config.ts.

import { defineConfig, loadEnv  } from 'vite'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import { nodePolyfills } from 'vite-plugin-node-polyfills'
import react from '@vitejs/plugin-react'

export default defineConfig(({ command, mode }) => {
  // Load env file based on `mode` in the current working directory.
  // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
  const env = loadEnv(mode, process.cwd(), '')
  return {
    plugins: [
      nodePolyfills(), // this is necessary to avoid "process is not defined issue"
      react()]
  }

})

Îl poți personaliza când ai nevoie

import { defineConfig } from 'vite'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    nodePolyfills({
      // To add only specific polyfills, add them here. If no option is passed, adds all polyfills
      include: ['path'],
      // To exclude specific polyfills, add them to this list. Note: if include is provided, this has no effect
      exclude: [
        'http', // Excludes the polyfill for `http` and `node:http`.
      ],
      // Whether to polyfill specific globals.
      globals: {
        Buffer: true, // can also be 'build', 'dev', or false
        global: true,
        process: true,
      },
      // Override the default polyfills for specific modules.
      overrides: {
        // Since `fs` is not supported in browsers, we can use the `memfs` package to polyfill it.
        fs: 'memfs',
      },
      // Whether to polyfill `node:` protocol imports.
      protocolImports: true,
    }),
  ],
})

Sper că acest lucru va ajuta pe toată lumea mult. Mult noroc

Răspunsul #2

Pentru a face să funcționeze buffer și process, faceți următoarele:

1. instalează buffer și process: npm install buffer process

2. editează index.html pentru a adăuga niște js:

<!-- node // buffer-->
<script>window.global = window;</script>
<script type="module">
    import { Buffer } from "buffer/"; // <-- no typo here ("/")
    import process from "process";
   
    window.Buffer = Buffer;
    window.process = process;
</script>

3. editați vite.config.js pentru a adăuga opțiuni resolve.alias:

export default defineConfig({
  [...]

  resolve: {
    alias: {
      process: "process/browser"
    }
  }
})

4. în componenta ta, importă buffer (notă /):

import { Buffer } from 'buffer/'

[...]

Exemplu live pe Stackblitz, deschide consolele de dezvoltator în previzualizare și uită-te la linia de depanare Uint8Array.

Poți să citești răspunsul meu vechi pentru configurări suplimentare, cum ar fi pentru proces, evenimente sau chiar criptomonede.