Vite uses web3, walletConnect reports an error

Because web3 runs in other environments (such as webpack, @vue/cli), they themselves will download some dependent packages, and vite deletes unnecessary packages, so it does not have Buffer global or process.env

If you want to run in the vite environment, the imported package should be changed to

import Web3 from 'web3/dist/web3.min.js'

Reference link: GitHub - ChainSafe/web3.js: Ethereum JavaScript API

You can configure vite.config.js to set the web3 alias to 'web3/dist/web3.min.js', so that you can directly import web3

=====================

The direction of the web3 library and the ethersjs library are the same

Compared with web3, the implementation of ethers is more suitable for beginners, and the demolition is more detailed

So I suggest you use the ethersjs library

ethers.js

What is ethers.js — ethers.js 3.0.0 documentation

web3.js

Introduction — Web3.py 5.29.2 documentation

 ================================

When using walletConnector, an error will be reported that global is not define

Refer to the official website, because walletConnetor still relies on many packages of the nodejs operating environment

This solution can also solve the error that web3 does not have globally

Download the package @esbuild-plugins/node-globals-polyfill

yarn add -D @esbuild-plugins/node-globals-polyfill

yarn add -D stream-browserify

yarn add -D crypto-browserify
// or download with npm

npm install -D @esbuild-plugins/node-globals-polyfill

npm install -D stream-browserify

npm install -D crypto-browserify

 Then configure it in vite.config.js

import { defineConfig } from 'vite'

import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'

//if you're using a create-vite framework template, you can also 
//import the vite plugin for that specific framework and add it in vite.config.js
//for more support. 
//For example, for vite.js react-ts template, you need to:
//import react from '@vitejs/plugin-react'
// and then add plugins: [react()] below

export default defineConfig({
  resolve: {
    alias: {
      stream: "stream-browserify",
      crypto: 'crypto-browserify',
      assert: 'assert'
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      // Node.js global to browser globalThis
      define: {
        global: "globalThis",
      },
      // Enable esbuild polyfill plugins
      plugins: [
        NodeGlobalsPolyfillPlugin({
          process: true,
          buffer: true,
        }),
      ],
    },
  },
});

reference

Core - Blocknative Documentation

Personally, I think this kind of configuration is still too troublesome, so we need to know why it needs the nodejs package, and what should we do if we encounter this kind of problem in the future? Do you read my articles every time?

Let's think about it carefully, why does the web front-end project need the nodejs package, isn't this funny?

Because the environment we usually develop is a runtime environment, it can be understood as an environment where various messy compilations will be performed during the running process

But in fact, what our web environment needs is very simple, which is the final .js file, because we can only run .js files

So we only need to check the final js module in their library, you can go directly to node_modules/xxx to find that .min.js is the compiled file it finally packaged (usually there will be, no more)