ReferenceError: Can't find variable: global

[kotsmile]

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

[iamkiko]

Similar issue here using Vite with React.

After following that message in the console, it tells me: Could not load content for http://localhost:3000/node_modules/@walletconnect/socket-transport/src/index.ts (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)

Looking at /node_modules/@walletconnect/socket-transport, there is no 'src' folder to begin with nor does it install it.

Did you have any luck?

[gaspardip]

Similar issue here using Vite with React.

After following that message in the console, it tells me: Could not load content for http://localhost:3000/node_modules/@walletconnect/socket-transport/src/index.ts (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)

Looking at /node_modules/@walletconnect/socket-transport, there is no 'src' folder to begin with nor does it install it.

Did you have any luck?

I was able to make the umd build work (via unpkg) with remix

[wong2]

@gaspardip How did u do that?

[gaspardip]

@gaspardip How did u do that?

Since @walletconnect/web3-provider won't compile with Remix (esbuild) for some reason, I figured I could just use the UMD build from unpkg. Just added https://unpkg.com/@walletconnect/[email protected]/dist/umd/index.min.js to my scripts and I was then able to use window.WalletConnectProvider.default normally in my code.

[armgit5]

@esbuild-plugins/node-globals-polyfill was able to help me out with global is not defined and Buffer is not defined here is related comment https://github.com/plouc/nivo/issues/1455#issuecomment-1041830487

[tfalencar]

This error also happens with Svelte. Is this something that has to be fixed by Svelte+Vite, or can something be done from WalletConnect side?

[vrde]

Related: https://github.com/vitejs/vite/issues/7257

[tfalencar]

After a bit of digging, this seems to be an old issue (almost 2 years old): https://github.com/WalletConnect/walletconnect-monorepo/issues/341
So it appears we can't use this library with any modern bundler apparently. Is this in the roadmap to be fixed @pedrouid ? seems it should be a high priority issue. I think WalletConnect has the best UX/Protocol for wallets, but can't use it at all the moment.

[cryptoembrace]

ahhh so hoped to find a solution here, too bad we can't use it with Vite I really hope they will fix it anytime soon

[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)

[yuliankarapetkov]

esbuildOptions: { // Node.js global to browser globalThis define: { global: 'globalThis' }, // Enable esbuild polyfill plugins plugins: [ NodeGlobalsPolyfillPlugin({ buffer: true }) ] }

For the this results in the following build error:

✘ [ERROR] The injected path "/{my_app_path}/node_modules/@esbuild-plugins/node-globals-polyfill/_buffer.js" cannot be marked as external

✘ [ERROR] The injected path "/{my_app_path}/node_modules/@esbuild-plugins/node-globals-polyfill/_virtual-process-polyfill_.js" cannot be marked as external

[thxForu]

esbuildOptions: { // Node.js global to browser globalThis define: { global: 'globalThis' }, // Enable esbuild polyfill plugins plugins: [ NodeGlobalsPolyfillPlugin({ buffer: true }) ] }

For the this results in the following build error:

✘ [ERROR] The injected path "/{my_app_path}/node_modules/@esbuild-plugins/node-globals-polyfill/_buffer.js" cannot be marked as external

✘ [ERROR] The injected path "/{my_app_path}/node_modules/@esbuild-plugins/node-globals-polyfill/_virtual-process-polyfill_.js" cannot be marked as external

Are you found the solution?, I have the same error

[finessevanes]

@thxForu does @FounderCasey's fix work for you?

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)