ReferenceError: Can't find variable: global

My build vite vue3 and packages vue-router and pinia. I have tried a lot variants and even the simplest one throws the same error every time. When I try to initialize WallectConnectProvider like that:

import WalletconnectProvider from '@walletconnect/web3-provider'

async function connect() {
  const config = {97: 'https://data-seed-prebsc-1-s1.binance.org:8545/'}
  const wc = new WalletconnectProvider({rpc: config})
  // await wc.enable()
}

Page immediately crushes with error: ReferenceError: Can't find variable: global.

Seems like this problem appeared on vue3 + vite. I researched a lot and found that the problem possible on walletconnect lib side

Repo for recreation of problem: vue-wc-problem

Node version 16.13.2

npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers

  System:
    OS: macOS 11.6.2
    CPU: (4) x64 Intel(R) Core(TM) i5-4250U CPU @ 1.30GHz
    Memory: 178.09 MB / 4.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chrome: 97.0.4692.71
    Safari: 15.2
  npmPackages:
    @vitejs/plugin-vue: ^2.0.1 => 2.1.0 
    vite: ^2.7.13 => 2.7.13

I have tried in dev and build modes same problem

[frangte]

import WalletConnectProvider from '@walletconnect/web3-provider/dist/umd/index.min.js'
import QRCodeModal from '@walletconnect/qrcode-modal/dist/umd/index.min.js'

try this

[FounderCasey]

As @armgit5 mentioned, this currently works: https://stackoverflow.com/questions/70714690/buffer-is-not-defined-in-react-vite

npm i @esbuild-plugins/node-globals-polyfill

Inside your vite.config.js file:

Import the package:

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

And then add optimizeDeps to the config:

export default defineConfig({
    // ...other config settings
    optimizeDeps: {
        esbuildOptions: {
            // Node.js global to browser globalThis
            define: {
                global: 'globalThis'
            },
            // Enable esbuild polyfill plugins
            plugins: [
                NodeGlobalsPolyfillPlugin({
                    buffer: true
                })
            ]
        }
    }
})

Currently working as of 8/2/22 - Vite(2.9.12) / Vue 3(3.2.37)